ライン入力、選択、お互いにテキストエリア

Question

私はそれを把握することはできませんフィールドを整列させるために黙っている。 あなたはeqaul幅ではないことがわかりますが、これをどのように修正できますか？ 私はこれをうまくやり直す方法を学びたい、一度の解決策を探していません。

#login-panel { 
 
    width: 400px; 
 
} 
 
.field { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
#login-panel > .field > input, #login-panel > .field > select { 
 
    border: 1px solid #ccc; 
 
    padding: 1em; 
 
    margin-bottom: 2px; 
 
    width: 100%; 
 
} 
 
#login-panel > .textarea > textarea { 
 
    width: 100%; 
 
    resize: none; 
 
}

 <form class="login-panel"> 
 
      <div id="login-panel"> 
 
       <div class="login-header">Login</div> 
 
       <div class="field"> 
 
        <input type="text" id="login-nickname" placeholder="Username"> 
 
       </div> 
 
       <div class="field"> 
 
        <input type="text" id="login-password" placeholder="Password"> 
 
       </div> 
 
       <div class="field"> 
 
        <select class="gender-name"> 
 
        </select> 
 
       </div> 
 
       <div class="field">  
 
        <select class="region-place"> 
 
        </select> 
 
       </div> 
 
       <div class="textarea"> 
 
        <textarea class="info" placeholder="Information"></textarea> 
 
       </div> 
 
      </div> 
 
     </form>

Answer 1

サイズで矛盾の理由は、これらの要素は、幅値に追加されるパディングを有することです。 box-sizing: border-box;の場合、幅に含まれます。

だからあなた（インライン）CSSにこれを追加します。

#login-panel * { 
    box-sizing: border-box; 
} 

はここcodepenです：http://codepen.io/anon/pen/mPXpeM