Переместить два поля ввода рядом

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

Вы можете просто использовать col классы

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

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

попробуйте добавить

 display:inline-block 

в обоих текстовых полях.

В качестве альтернативы вы также можете попробовать

display: flex;