CSS使标签和表单上的输入对齐 [英] CSS to align label and inputs on form

问题描述

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

I have a problem with aligning my labels and input fields in a form. Time and again I end up with something like this:

其中的HTML是这样产生的:

Which is produced with HTML like so:

...
<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并选择宽度等，以便所有内容都能正确排列.

Naturally my issue is that the labels and the inputs don't line up, so the display is all jaggy, etc. I can personally think of many ways around this, using a table, setting a bunch of divs, and picking widths, etc. so that everything lines up properly.

并不是说这些方法不起作用，但是它们似乎不是真正的解决方案，更像是一种hack，然后，如果标签文本/字体改变等，我最终不得不操纵标签宽度，等等.

It's not that these approaches don't work, but they don't seem to be more of a hack than a real solution, and then I end up having to manipulate the label widths if the label text / font changes, etc.

在保留简单的HTML/CSS的同时，是否有一种更简单的方法来解决此类问题?还是我应该坚持使用硬编码宽度，div，使用表等的经典方法?

Is there an easier way to solve this type of problem, while preserving simple HTML / CSS or should I stick with the classic approach of hard coding widths, divs, using tables, etc ?

推荐答案

它应该足以为标签设置一个大于最大标签文本的宽度

it should be enough to set a width to the labels that is larger than the largest label-text

示例CSS

 label {
    display:inline-block;
    width:350px;
 }

因此所有输入将在350px之后对齐，这是您想要的效果吗? http://jsfiddle.net/dKjpk/5/

so all inputs would line up after 350px, is that your desired effect ? http://jsfiddle.net/dKjpk/5/

这篇关于CSS使标签和表单上的输入对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！