如何将2个输入文本相互靠近？

Question

所以我希望我的注册和返回按钮（两者都是输入类型：提交）位于中心。问题是即使我使用margin：auto也无法正常工作。请注意我已经为此输入设置了宽度。

enter image description here

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<?php
    	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">
    				<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/>

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试将输入按钮包裹在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 2

您是否可以使用<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/

的小提琴

Answer 3

使用此

<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/