Question

我确信有很多人遇到这个问题，但我找不到合适的解决方案。这基本上就是问题所在。我有一对带有两对标签和字段的表单。

HTML：

<label for="Account">Inlognaam:</label>
<input class="field" id="Account" name="Account" type="
<br />
<label for="Wachtwoord">Wachtwoord:</label>
<input class="field" id="Wachtwoord" name="Wachtwoord" type="password" />

CSS：

label {
    width: 150px;
    float: left;
    text-align: left;
}

所以问题是：当我不使用'float：left;'时输入字段结构不好。但标签是顶部对齐的。如何解决这个问题？

这里可以看到一个例子：http://jsfiddle.net/ptKEh/9/（评论浮动：左;看看我的意思）

EDIT ::

另一件事......输入字段在Chrome中是正确的，但在IE9（9.0.8）中，第二个字段稍短。

Not equal size fields http://oi42.tinypic.com/35mehe1.jpg

Answer 1

而不是浮动标签只需使用display: inline-block;
它将保留垂直对齐，甚至可以在IE6和7上运行

Answer 2

我建议使用填充将文本向下移动为内联。这仅适用于标签的1行文本，并且具有跨浏览器功能。

我已经整理了一个示例jsfiddle http://jsfiddle.net/ptKEh/11/

向左浮动导致我的输入标签位于顶部而不是v-align中间

2 个答案: