Question

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

enter image description here

使用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，使用表等的经典方法？

Answer 1

将标签的宽度设置为大于最大标签文本

的宽度应该足够了

示例css

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

因此所有输入都会在350px之后排成一列，这是你想要的效果吗？ http://jsfiddle.net/dKjpk/5/

Answer 2

这是一个选项

ul {
  display: table;
}

li {
  display: table-row;
}

label, input {
  display: table-cell;
}

当然，您应该根据特定表单调整css，但这会为您提供表格布局，而不会牺牲标记。这是一个fiddle

Answer 3

如果可以为ul提供固定/相对宽度，则可以使用浮动标签内的选项：

ul{
  width:500px; // or 100%;
}

li{
    width:100%;
    display:block;
}

li{
    list-style:none;
    clear:both;
}

li label{
    float:left;
}

li input{
    float:right;
}

这是一个fiddle

Answer 4

可以说你可以在这里使用表格，因为在语义上你可以认为这个表格是表格数据。

否则你需要将input元素放在容器内，这样它们都是齐平的，在label元素上设置一个固定的宽度，或者使用某种流体网格来处理这个（我通常使用Foundation，因此我会使用列，在其流体容器中将label和input元素设置为width: 100%。

Answer 5

试试这样通过创建一个表，你的东西在彼此之下的同一区域

<html>
<head>
    <style>
        label{
            font-weight:bold;
        }
    </style>
</head>
<body>
    <form>
        <table>
            <tr>
                <td><label for="street">Street</label></td>
                <td><input type="text" name="street"></td>
            </tr>
            <tr>
                <td><label for="suite">Suite</label></td>
                <td><input type="text" name="suite"></td>
            </tr>
            <tr>
                <td><label for="city">City</label></td>
                <td><input type="text" name="city"></td>
            </tr>
            <tr>
                <td><label for="state_region">State or Region</label></td>
                <td><select><option>Arizona</option></select></td>
            </tr>
            <tr>
                <td><label for="pc">Postal Code</label></td>
                <td><input type="text" name="pc"></td>
            </tr>
            <tr>
                <td><label for="country">Country</label></td>
                <td><select><option>USA</option></select></td>
            </tr>
            <tr>
                <td><label for="phone">Phone</label></td>
                <td><input type="text" name="phone"></td>
            </tr>
            <tr>
                <td><label for="fax">Fax</label></td>
                <td><input type="text" name="fax"></td>
            </tr>
            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="text" name="email"></td>
            </tr>
        </table>
    </form>
</body>

CSS用于在表单上对齐标签和输入

5 个答案: