php - 并排移动两个输入框

我试图重新排列我的输入框，使其看起来像这样：

目前，他们只是互相摔倒

我尝试使用此代码，但所做的只是使包装盒更短
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>

它所做的就是将盒子彼此叠放并使其更小。我现在有点卡住了。帮助将不胜枚举。谢谢！

最佳答案

尝试添加

 display:inline-block

在两个文本框中。

另外，您也可以尝试

display: flex;

关于php - 并排移动两个输入框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50224703/