排队输入，选择，textarea相互

Question

我想要排列我无法弄明白的领域。 正如你所看到的那样，它们不在eqaul宽度上，我该如何解决这个问题。 我没有寻找一次性解决方案我想学习如何以很好的方式解决这个问题。

＆＃13;

＆＃13;

#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;
}

＆＃13;

        <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尺寸不一致的原因是这些元素具有填充，这些填充被添加到宽度值中。使用 |Date| | |Aircraft| | |Pre / Post| 04/08/2016 | aircraft1 | Pre-Flight 04/08/2016 | aircraft1 | Post-Flight 04/08/2016 | aircraft2 | Pre-Flight 04/08/2016 | aircraft2 | Post-Flight 04/08/2016 | aircraft3 | Pre-Flight 04/08/2016 | aircraft3 | Post-Flight 04/09/2016 | aircraft1 | Pre-Flight 04/09/2016 | aircraft1 | Post-Flight etc | etc | etc 时，它们会包含在宽度中。

因此将此添加到您的（内联）CSS：

box-sizing: border-box;

这是一个codepen：http://codepen.io/anon/pen/mPXpeM