css - 并排DIV不对齐

Question

我正在尝试创建几个并排放置的 DIV，每个占据容纳它们的 div 宽度的一半。并排使用 float: left 工作正常，但我的元素没有正确排列。我做了一个 jsfiddle 来告诉你我的意思。 http://jsfiddle.net/kzFqU/

如您所见，它看起来不错，但如果您将结果设置得非常宽，输入的正确对齐方式就会变得很糟糕。

<div class="container-narrow">
<div class="form_field">
    <label>Full Width</label>
    <input type="text" name="what">
</div>
<div class="form_field halfwidth">
    <label>Half Width</label>
    <input type="text" name="what">
</div>
<div class="form_field halfwidth">
    <label>Also Half Width</label>
    <input type="text" name="what">
</div>
<div class="form_field">
    <label>Full Width</label>
    <input type="text" name="what">
</div>

和CSS

body {
padding-top: 20px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
background:whitesmoke;
}

.container-narrow {
    margin: 0 auto;
    background:white;
    border-radius: 10px;
    padding:10px;
}

.form_field {
    padding: 10px;
}

.form_field input {
    width:100%;
}

.form_field label {
    margin-bottom:0px;
}

.form_field input {
    clear:both;
}

.halfwidth {
    width: 45%;
    float: left;
}

Answer 1

尝试清除半 Angular 元素后的 float ，例如:

.form_field:before,
.halfwidth:before {
    clear: both;
    display: block;
    content: "\0020";
    visibility: hidden;
}

上面的解决方案是解决问题的一些 self 清除的好方法!查看demo