表单，输入框的放置

Question

我在尝试弄清楚如何将其中一个输入/标签放在另一个输入/标签旁边，而其他所有内容都是垂直对齐时遇到问题。

我想在省+选择右侧的邮政编码+输入框。有谁知道什么是错的？

这是我到目前为止。

https://jsfiddle.net/0u755s4q/

HTML：

<section class="form__wrap"> 
      <h3>Simply fill out the form below and click ‘SUBMIT’. Good luck!</h3> 
      <p>(All fields are required unless stated otherwise)</p> 
      <ol> 
       <li class="form--fullbox"> 
        <label for="" class="">*First Name</label> 
        <input name="" type="text" id="" maxlength="20" placeholder="" value=""/> 
       </li> 
       <li class="form--fullbox"> 
        <label for="" class="">*Last Name</label> 
        <input name="" type="text" id="" maxlength="20" placeholder="" value=""/> 
       </li> 
       <li class="form--fullbox"> 
        <label for="" class="">*Address Line 1</label> 
        <input name="" type="text" id="" maxlength="50" placeholder="" value=""/> 
       </li> 
       <li class="form--fullbox"> 
        <label for="" class="">&nbsp;Address Line 2</label> 
        <input name="" type="text" id="" maxlength="50" placeholder="" value=""/> 
       </li> 
       <li class="form--fullbox"> 
        <label for="" class="">*City</label> 
        <input name="" type="" id="" maxlength="25" placeholder="" value=""/> 
       </li> 
       <li class="form--province"> 
        <label for="" class="">*Province</label> 
        <select name="" id="" class=""> 
         <option value="AB">Alberta</option> 
         <option value="BC">British Columbia</option> 
         <option value="MB">Manitoba</option> 
         <option value="NB">New Brunswick</option> 
         <option value="NL">Newfoundland</option> 
         <option value="NS">Nova Scotia</option> 
         <option value="NT">Northwest Territories</option> 
         <option value="NU">Nunavut</option> 
         <option value="ON">Ontario</option> 
         <option value="PE">Prince Edward Island</option> 
         <option value="QC">Quebec</option> 
         <option value="SK">Saskatchewan</option> 
         <option value="YK">Yukon</option> 
        </select> 
       </li> 
       <li class="form--postalcode"> 
        <label for="" class="">*Postal Code</label> 
        <input name="" type="text" maxlength="6" id="" placeholder="" value="" /> 
       </li> 
       <li class="form--fullbox"> 
        <label for="" class="">*Email</label> 
        <input name="" type="email" id="" maxlength="50" placeholder="" value="" /> 
       </li> 
       <li class="form--phone"> 
        <label for="" class="">*Phone Number</label> 
        <input name="" type="tel" maxlength="10" id="" placeholder="" value="" /> 
       </li> 


       <li class="form--fullbox"> 
        <label for="" class="">Favourite Colour:</label> 
        <select name="" id="" class=""> 
         <option value="">town1</option> 
         <option value="">town2</option> 
         <option value="">town3</option> 
         <option value="">town4</option> 
         <option value="">town5</option> 
        </select> 
       </li> 

       <li class="form--fullbox"> 
        <input id="" type="checkbox" name="" /> 
        <label for="">Text <a href="" target="_blank">Privacy Policy.</a></label> 
       </li> 

       <li class="form--fullbox"> 
        <input id="" type="checkbox" name="" /> 
        <label for="">Text <a href="" target="_blank">Rules & Regulations.</a></label> 
       </li> 

       <li class="form--fullbox"> 
        <input type="submit" value="submit" class="" id="" /> 
       </li> 
      </ol> 

     </section> 

CSS：

.form__wrap{ 
    margin: 0 auto; 
    width: 80%; 
    background-color: pink; 
    text-align: center; 
} 

.form__wrap ol{ 
    margin: 0 auto; 
    background-color: lightblue; 
    width: 80%; 
    text-align: right; 
    list-style: none; 
} 

.form__wrap label{ 
    background-color: lightblue; 
    display: inline-block; 
    float: left; 
    clear: left; 
    width: 20%; 
    padding-top: 20px; 
    padding-right: 20px; 
    text-align: right; 
} 
.form--fullbox input{ 
    display: inline-block; 
    float: left; 
    width: 75%; 
    padding: 12px 20px; 
    margin: 8px 0; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
} 
.form--province select{ 
    display: inline-block; 
    float: left; 
    width: 150px; 
    padding: 12px 20px; 
    margin: 8px 0; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
    background-color: blue; 
} 
.form--postalcode label{ 
    display: inline-block; 
    float: left; 
    width:15%; 
    padding-top: 20px; 
    padding-right: 20px; 
    text-align: right; 
    background-color: red; 
} 

.form--postalcode input{ 
    background-color: red; 
    display: inline-block; 
    float: left; 
    width: 30%; 
    padding: 12px 20px; 
    margin: 8px 0; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
} 
.form--phone input{ 
    display: inline-block; 
    float: left; 
    width: 300px; 
    padding: 12px 20px; 
    margin: 8px 0; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
} 
.form--fullbox select{ 
    display: inline-block; 
    float: left; 
    width: 150px; 
    padding: 12px 20px; 
    margin: 8px 0; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
} 

Answer 1

有许多浮动属性海事组织。 那么，您需要使用显示器来定位你的形式：弯曲

我会做到这一点使用这样的事情

<ol> 
    <li>name</li> 
    <li>surnema/li> 
    <div class="postal"> 
    <li>province</li> 
    <li>postal</li> 
    </div> 
    <li>...</li> 
</ol> 

和类CSS的邮政我会用：

display:flex; 
justify-content: space-between; 

问候

Answer 2

最简单的解决方案是浮动li容器省和邮政：

.form--province, .form--postal {float:left;} 

在附注中，我将重新考虑您对ol和li的使用。邮政或地址元素的自然分组元素是Fieldset标签，但li是列表元素的唯一有效子元素。