4

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

在此处输入图像描述

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

4

5 回答 5

3

将宽度设置为大于最大标签文本的标签就足够了

示例 CSS

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

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

于 2013-11-12T21:22:45.880 回答
3

这是一个选项

ul {
  display: table;
}

li {
  display: table-row;
}

label, input {
  display: table-cell;
}

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

于 2013-11-12T21:23:11.120 回答
0

如果可以提供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;
}

这是一个小提琴

于 2013-11-12T21:24:55.323 回答
0

可以说，您可以在这里使用表格来证明是合理的，因为从语义上您可以将该表格视为表格数据。

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

于 2013-11-12T21:27:44.657 回答
0

通过创建一个表格来尝试这样，你的东西在彼此下方的同一区域中

<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>

于 2016-08-30T13:30:11.700 回答