我在对齐表单中的标签和输入字段时遇到问题。我一次又一次地得到这样的结果:
这是用 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/