HTML表单对齐 - 使用标签输入

Question

我正在努力使其适用于所有浏览器。不同的浏览器给出了不同的结果（IE对我来说是最成问题的）。我添加了截图，以便您可以看到我在说什么。

这是表单在Safari，Firefox和Chrome中的外观：

http://imageshack.us/photo/my-images/210/bildschirmfoto20120226u.png/

这是IE6和IE7中表单的外观：

http://imageshack.us/photo/my-images/37/bildschirmfoto20120226u.png/

这是IE8和IE9：

http://imageshack.us/photo/my-images/39/bildschirmfoto20120226u.png/

HTML

<form method="post" action="?test" id="form">
    <label for="user">USERNAME</label>
    <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
    <div id="empty-user" class="fail">This stuff will get replaced by the title contents.</div>
    <label for="password" class="clear">PASSWORD</label>
    <input type="password" name="password" id="password" maxlength="100" title="Please enter your password." data-h5-errorid="empty-password" tabindex="2" required />
    <div id="empty-password" class="fail">This stuff will get replaced by the title contents.</div>
</form>

CSS

label {
    background: yellow;
    font-size: 12px;
    font-weight: bold;
    width: 100px;
    float: left;
    margin-right: 50px;
    text-align: right;
    cursor: pointer;
}

input {
    height: 30px;
    background-color: #fafafa; 
    border: 1px solid #abaaaa;
    width: 300px;
    margin: 5px 0 5px 0;
    float: right;
}

现在我的问题是，如何对齐标签，使它们与输入字段垂直对齐？我在这里使用了搜索，大部分时间都在使用

vertical-align: middle;

建议

，但这根本不起作用。 Safari，Chrome和Firefox的唯一解决方案是在标签上添加margin-top或padding-top，但这会破坏IE8和IE9中的格式。

我该怎么办这个问题？在输入字段上删除高度不是我的选择。

Answer 1

在输入标记之后放置clear:both（某处）。

我建议您在表单中添加更多标记以进行额外的自定义。通常我喜欢这样的形式：

<div class="field">
    <label for="user">USERNAME</label>
    <div class="field-subject">
        <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
    </div>
</div>

.field { 
    overflow: auto; /* this "clears" the floated elements */
    margin-bottom: 10px;
}

.field label {
    float: left;
    width: 200px;
}

.field .field-subject {
    float: left;
    width: 500px;
}