フォーム、入力ボックスの配置

Question

他のものが横に並んでいる間に、入力/ラベルを別のものの上に置く方法を見つけようとしています。

私はprovince + selectの右側の郵便番号+入力ボックスを希望します。誰が何が間違っているのか分かりますか？

これまで私がこれまで持っていたことは次のとおりです。

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

IMO多くのフロートプロパティにあります。 はその後、あなたは、ディスプレイを使用して、フォームを配置する必要があります。

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

について：私はこの

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

とクラスのため、私が使用するCSSの郵便のようなものを使用してこれを行うだろう

を曲げます

Answer 2

最も簡単な解決策は、州および郵便番号のliコンテナをフロートさせることです。

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

私は、olの使用を再考し、liを関連付けます。郵便または住所の要素の自然なグループ分け要素はFieldsetタグですが、liはリスト要素の唯一の有効な子要素です。