表單，輸入框的放置

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是列表元素的唯一有效子元素。