并排移动两个输入框

Question

我试图将输入框重新排列为：

目前，他们只是彼此摔倒

我尝试使用此代码，但它所做的就是缩短框 http://jsfiddle.net/aY9HC/

这是我的代码

   <style>
.fieldBlock
    {
    display: block;
    width: 200px;
    float: left;
    }

    </style>

这是文本框代码

    <div id="main-wrapper">

        <div class="unix-login">

            <div class="container-fluid">

                <div class="row justify-content-center">

                    <div class="col-lg-4">

                        <div class="login-content card">

                             <center><h3>Register Account</h3>

                            <p><strong>Create Account</strong> » Purchase » Begin</p></center>

                            <div class="login-form">

                                <form data-toggle="validator" method="post" id="register_form">

                                    <div class="form-group">
<div class="fieldBlock">

                                        <label>Name</label>

                                        <input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>
</div>
                                    </div>

                                    <div class="form-group">
<div class="fieldBlock">
                                        <label>Age</label>

                                        <input type="dob" id="age" name="age"class="form-control" placeholder="03/26/2001" required></div>
</div>
                                    <div class="form-group">

                                        <label>Email address</label>

                                        <input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>

                                        <div class="help-block with-errors"></div>

                                    </div>

                                    <div class="form-group">

                                        <label>Password</label>

                                        <input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>

                                        <div class="help-block"></div>

                                    </div>

                                    <div class="form-group">

                                        <label>Choose Your Course</label>

                                        <select name="course" class="form-control">

                                            <option value="0" selected>Texas Parent Taught Drivers Ed</option>

                                            <option value="1">Texas Instructor Taught Drivers Ed</option>

                                            <option value="2">Texas Adult Drivers Ed</option>

                                        </select>

                                    </div>

                                    <div class="form-group">

                                        <label>Referral</label>

                                        <input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">

                                    </div>

                                    <div class="form-group checkbox">

                                        <label>

                                        <input id="policy" type="checkbox" data-error="Don't you agree?" required> Agree the terms and Privacy Policy

                                        </label>

                                        <div class="help-block with-errors"></div>

                                    </div>

                                    <button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" >Register</button>

                                    <div class="register-link m-t-15 text-center">

                                        <p>Already have account? <a href="page-login.php"> Sign in</a></p>

                                    </div>

                                </form>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>



    </div>

它所做的只是将盒子保持在彼此之下并使它们变得更小。我现在有点卡住了。帮助将被批准。谢谢！

Answer 1

尝试添加

 display:inline-block 

在两个文本框上。

或者您也可以尝试

display: flex;

Answer 2

尝试使用引导网格（行和列）来组织输入字段。 示例模式：

 <form data-toggle="validator" method="post" id="register_form">
     <div class="row mx-0">
        <div class="form-group col-6">   
            <div class="fieldBlock">
               <label>Name</label>
               <input id="username" type="name" name="name"                 
               class="form-control"                                               
               placeholder="First & Last Name" required>
          </div>   
       </div>
       <div class="form-group col-6">
           <div class="fieldBlock6">
              <label>Age</label>
              <input type="dob" id="age" 
              name="age"class="form-control" 
              placeholder="03/26/2001" required>
           </div>
       </div>
    </div>
    <div class="row mx-0">
        <div class="form-group col-12">
              <label>Email address</label>
              <input id="email" type="email" name="email" 
               class="form-control" placeholder="Email" 
               data-error="This email is invalid" required>

               <div class="help-block with-errors"></div>
         </div>
    </div>
 </form

Answer 3

使用float将元素彼此相邻移动，你在正确的轨道上。但是，当元素在狭窄空间中彼此相邻浮动时，它们将默认堆叠。通过使父容器变大或变小，您可以看到它是如何工作的。

此外，还有一些 fieldBlocks 缺失，因此样式停止应用。

我不想花太多时间在上面但是认为从你提供的代码中汇总一个工作样本会很有趣。可能还有更多可以清理的东西，但希望它能提供一些见解。

http://jsfiddle.net/aY9HC/1373/

CSS

/* make a nice form wrapper */
#main-wrapper{
      width:100%;
      padding:1em;
}
#main-wrapper h3, 
#main-wrapper p, 
#main-wrapper button{
  text-align:center;
  margin-bottom:10px;
  clear:left;
}
#main-wrapper button{
  display:block;
  position:relative;
  left:45%;
}

/* Define our basic fieldBlock style / stagger rows */
.fieldBlock
{
  width: 50%;
  float: left;
  margin-bottom:15px;
}
.fieldBlock input, 
.fieldBlock select{
  height:30px;
}
.fieldBlock input[type='checkbox']{
  height:10px;
}
.fieldBlock:nth-of-type(3n){
  width:100%;
}
.fieldBlock:nth-of-type(3n) input{
  width:40%;
}

/* Define look for our labels */
.fieldBlock label{
  font-weight:bold;
  display:block;
  margin-bottom:5px;
}
.fieldBlock .nonblock{
  display:inline-block;
}

HTML

    <div id="main-wrapper">

      <h3>Register Account</h3>

      <p><strong>Create Account</strong> » Purchase » Begin</p>

      <form data-toggle="validator" method="post" id="register_form">

        <div class="fieldBlock">
          <label>Name</label>
          <input id="username" type="name" name="name" class="form-control" placeholder="First & Last Name" required>
        </div>

        <div class="fieldBlock">
          <label>Age</label>

          <input type="dob" id="age" name="age"class="form-control" placeholder="03/26/2001" required>
        </div>

        <div class="fieldBlock">
          <label>Email address</label>

          <input id="email" type="email" name="email" class="form-control" placeholder="Email" data-error="This email is invalid" required>

          <div class="help-block with-errors"></div>
        </div>

        <div class="fieldBlock">
          <label>Password</label>

          <input id="password" type="password" name="password" class="form-control" placeholder="Password" data-minlength="8" data-error="Minimum of 8 characters" required>

          <div class="help-block"></div>
        </div>


        <div class="fieldBlock">
         <label>Choose Your Course</label>

          <select name="course" class="form-control">

            <option value="0" selected>Texas Parent Taught Drivers Ed</option>

            <option value="1">Texas Instructor Taught Drivers Ed</option>

            <option value="2">Texas Adult Drivers Ed</option>

          </select>
        </div>


          <div class="fieldBlock">

            <label>Referral</label>

            <input id="referral" type="text" name="referral" class="form-control" placeholder="Referral Code" value="<?php echo $refer?>">

          </div>

          <div class="fieldBlock checkbox">


              <input id="policy" type="checkbox" data-error="Don't you agree?" required /> 
              <label for="policy" class="nonblock">Agree the terms and Privacy Policy</label>

            <div class="help-block with-errors"></div>

          </div>

            <button name="register" type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" >Register</button>

          <p>Already have account? <a href="page-login.php"> Sign in</a></p>


        </form>

</div>

Answer 4

您可以使用col类

<div class='row'>
    <div class='col'>Your first text box</div>
    <div class='col'>Your second text box</div>
</div>