並排移動兩個輸入框

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>