CSS在表单上对齐标签和输入答案

【问题标题】：CSS to align label and inputs on formCSS在表单上对齐标签和输入
【发布时间】：2016-08-30 21:30:11
【问题描述】：

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

这是用 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、使用表格等的经典方法？

【问题讨论】：

我可能会为此被扔石头，但我会使用桌子。不是真正的 hack，而且很容易维护。
表格是一种方式，在标签上设置最小宽度或将输入浮动到右侧是其他方式。
@YuriyGalanter 我和你在一起。 CSS 人群总是抱怨表格，但很少提供始终如一且可预测的东西。
表格用于表格数据，您在此处拥有：一列标题 () 和一列数据。
@Ennui 有数百种 CSS 无法做到的事情（因为它的缺点），而一张表格可以做到。这是一个：stackoverflow.com/questions/19458993/…。此外，最终用户并不关心它是否是一个表格，这留给 CSS 粉丝。

【解决方案1】：

这里有一个选项

ul {
  display: table;
}

li {
  display: table-row;
}

label, input {
  display: table-cell;
}

当然，您应该使 css 适应您的特定形式，但这会在不牺牲标记的情况下为您提供表格布局。这是fiddle

【讨论】：

不错的解决方案。避免使用宽度属性。这很好！ :) 谢谢！

【解决方案2】：

为标签设置一个比最大标签文本更大的宽度就足够了

示例css

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

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

【讨论】：

难道label 也不需要display:inline-block 吗？
你说得对，它的工作原理非常棒，不过我想最好的解决方案是向左浮动标签，向右浮动输入，就像 ravb79 所述
我在问题中提到了这种方法。是的，它有效，但我真的想问是否有更简单、更能容忍变化的方式。

【解决方案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

【讨论】：

【解决方案4】：

可以说您可以在此处使用表格来证明其合理性，因为从语义上您可以将该表格视为表格数据。

否则，您需要将input 元素在其容器内浮动，以便它们都齐平，在label 元素上设置固定宽度，或者使用某种流体网格来处理这个问题（我通常使用 Foundation所以我会为此使用列，label 和 input 元素在其流体容器中设置为 width: 100%。

【讨论】：

【解决方案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>

【讨论】：