Php 并排移动两个输入框

我正在尝试重新排列输入框，使其看起来像这样：

目前，它们只是一个接一个地向下移动

我试着使用这个代码，但它所做的只是使盒子变短

这是我的密码

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

    </style>

.字段块
{
显示：块；
宽度：200px；
浮动：左；
}

这是文本框代码

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

登记帐户
创建帐户»购买»开始

名称
年龄
电子邮件地址
密码
选择你的课程
德克萨斯州家长教司机
德克萨斯州的一名教师教司机开车
德克萨斯州成人司机
送交
尝试添加

 display:inline-block 

在两个文本框上

或者你也可以试试

display: flex;

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

 <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


名称
年龄
电子邮件地址
使用float移动相邻的元素是正确的。但是，当元素在狭窄的空间中相邻浮动时，默认情况下它们会堆叠起来。通过使父容器变大或变小，您可以看到这是如何工作的

此外，还缺少几个字段块，因此样式将停止应用

我不想花太多时间在上面，但我认为从您提供的代码中收集一个工作示例会很有趣。可能还有更多需要清理的地方，但希望它能提供一些见解


CSS

HTML


登记帐户
创建帐户»购买»开始

名称
年龄
电子邮件地址
密码
选择你的课程
德克萨斯州家长教司机
德克萨斯州的一名教师教司机开车
德克萨斯州成人司机
送交
您可以只使用
col
类

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


您的第一个文本框
您的第二个文本框
JSFiddle将两个框并排显示。您可以将另一个类附加到div-
@Mr.Blue谢谢您的提示，我更改了它。display Flex所做的只是将标题和文本框并排显示，而不是将文本框并排显示。您可以尝试将.fieldBlock{display:Flex；}的css设置为文本框吗。请检查这个。如何修正对齐方式并使名称框变大？似乎行有默认的边距。添加到行中的类mx-0将修复对齐。通过设置输入字段的宽度来获得所需的布局实验。检查格式化选项。
    <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>

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