如何将2个输入文字置于靠近的位置？

Question

所以我想我的注册和后退按钮（都是输入类型：提交）在中心。问题是即使我使用margin：auto也不行。请注意我已经为此输入设置了宽度。

enter image description here

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    font-size: 14px; 
 
    background-image: url("StockSnap_FS24L3X9BH.jpg"); 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
} 
 

 
.container { 
 
    width: 50%; 
 
    margin: 10px auto; 
 
    display: block; 
 
} 
 

 
.row { 
 
    width: 80%; 
 
    margin: 10px auto; 
 
    padding: 20px; 
 
} 
 

 
input:not([type=submit]):not([name=age]) { 
 
    width: 50%; 
 
    clear: left; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    width: 150px; 
 
    float: left; 
 
    text-align: left; 
 
} 
 

 
input[type=submit] { 
 
    width: 100px; 
 
    margin: 0 auto; 
 
} 
 

 
input[name=age] { 
 
    width: 60px; 
 
} 
 

 
#gender { 
 
    width: 100px; 
 
}

<?php 
 
    \t include_once("code2_registration.php"); 
 
    ?> 
 

 
    <div class="container"> 
 
    <h1 style="text-align: center"> Membership Forum </h1> 
 
    <div class="row"> 
 
     <form action="register.php" method="POST"> 
 

 
     <p> Please fill the following form to complete the registration. </p> <br/> 
 
     <label>Username:</label> <input type="text" name="username" /> <br/><br/> 
 
     <label>Password:</label> <input type="password" name="password" /> <br/><br/> 
 
     <label>First Name:</label> <input type="text" name="firstName" /> <br/><br/> 
 
     <label>Last Name:</label> <input type="text" name="lastName"> <br/><br/> 
 
     <label>Email Address:</label> <input type="text" name="email"> <br/><br/> 
 
     <label>Sex: </label><select name="gender" id="gender"> 
 
    \t \t \t \t <option value="male"> Male </option> 
 
    \t \t \t \t <option value="female"> Female </option> 
 
    \t \t \t \t <option value="others"> Others </option> 
 
    \t \t \t \t <option value="others"> Prefer not to say </option> 
 
    \t \t \t </select> <br/><br/> 
 
     <label>Age:</label> <input type="number" name="age"> <br/><br/> 
 

 
     <input type="submit" name="submit" value="Sign Up" id="submit"> 
 
     <input type="submit" name="back" value="Back" id="back"> 
 
     </form> 
 
    </div> 
 
    </div>

Answer 1

使用此

<div class="container"> 
     <h1 style="text-align: center"> Membership Forum </h1> 
    <div class="row"> 
     <form action="register.php" method="POST"> 

      <p> Please fill the following form to complete the registration. </p> <br/> 
      <label>Username:</label> <input type="text" name="username" /> <br/><br/> 
      <label>Password:</label> <input type="password" name="password" /> <br/><br/> 
      <label>First Name:</label> <input type="text" name="firstName" /> <br/><br/> 
      <label>Last Name:</label> <input type="text" name="lastName"> <br/><br/> 
      <label>Email Address:</label> <input type="text" name="email"> <br/><br/> 
      <label>Sex: </label><select name="gender" id="gender"> 
       <option value="male"> Male </option> 
       <option value="female"> Female </option> 
       <option value="others"> Others </option> 
       <option value="others"> Prefer not to say </option> 
      </select> <br/><br/> 
      <label>Age:</label> <input type="number" name="age"> <br/><br/> 
      <div class="center"> 
       <input type="submit" name="submit" value="Sign Up" id="submit"> 
       <input type="submit" name="back" value="Back" id="back"> 
      </div> 
     </form> 
    </div> 
</div> 

.center { 
    text-align: center; 
} 

* { 
     margin: 0; 
     padding: 0; 
    } 

    body { 
     font-size: 14px; 
     background-image: url("StockSnap_FS24L3X9BH.jpg"); 
     background-position: center center; 
     background-repeat: no-repeat; 
     background-attachment: fixed; 
     background-size: cover; 

    } 

    .container { 
     width:50%; 
     margin: 10px auto; 
     display: block; 
    } 

    .row { 
     width:80%; 
     margin: 10px auto; 
     padding: 20px; 
    } 

    input:not([type=submit]):not([name=age]) 
    { 
     width: 50%; 
     clear:left; 
    } 

    label { 
     display: inline-block; 
     width: 150px; 
     float: left; 
     text-align: left; 
    } 

    input[type=submit] { 
     width: 100px; 
     margin: 0 auto; 
    } 

    input[name=age] { 
     width:60px; 
    } 

    #gender { 
     width:100px; 
    } 

现场演示 - https://jsfiddle.net/grinmax_/o5rfc8b5/

Answer 2

尝试包装你的输入按钮在div这样的：

<div class="submit_block"> 
    <input name="submit" value="Sign Up" id="submit" type="submit"> 
    <input id="back" name="back" value="Back" type="submit"> 
</div> 

，然后应用css：

.submit_block { 
    text-align: center; 
} 

Answer 3

难道你不能简单地用<div>包装那些输入，并用text-align: center来设计它的样式吗？

<div class="centered-div"> 
    <input type="submit" name="submit" value="Sign Up" id="submit"> 
    <input type="submit" name="back" value="Back" id="back"> 
</div 

.centered-div { 
    text-align: center; 
} 

这里是这段代码的小提琴https://fiddle.jshell.net/n3mtsrhj/1/