我在对齐表单中的标签和输入字段时遇到问题。我一次又一次地得到这样的结果:

这是用 HTML 生成的,如下所示:

...
<ul>
    <li>
      <label for="STREET">Street</label>
      <input data-val="true" data-val-required="The Street field is required." id="STREET" name="STREET" type="text" value="P.O. Box 1053" />
    </li>
    <li>
      <label for="SUITE">Suite</label>
      <input id="SUITE" name="SUITE" type="text" value="" />
    </li>
    <li>
      <label for="city">City</label>
      <input data-val="true" data-val-required="The City field is required." id="city" name="city" type="text" value="Dalton" />
    </li>
...

自然我的问题是标签和输入不对齐,所以显示都是锯齿状的等等。我个人可以想到很多方法来解决这个问题,使用表格,设置一堆 div,并选择宽度等. 以便一切正常。

并不是说这些方法不起作用,但它们似乎并没有比真正的解决方案更像是一种黑客行为,然后如果标签文本/字体发生变化等,我最终不得不操纵标签宽度。

有没有更简单的方法来解决这类问题,同时保留简单的 HTML/CSS 或者我应该坚持使用硬编码宽度、div、使用表格等的经典方法?

最佳答案

这是一个选项

ul {
  display: table;
}

li {
  display: table-row;
}

label, input {
  display: table-cell;
}

当然,您应该使 css 适应您的特定形式,但这为您提供了表 布局 而不会牺牲标记。这是一个 fiddle

关于html - CSS 对齐标签和表单上的输入,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19940103/

10-12 03:18
查看更多