logo标签列表

CSS对齐表单标签和输入框

htmlcsslayout
4

我在表单中对齐标签和输入字段上遇到了问题。总是出现这样的情况：

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以及选择宽度等，以确保所有内容都能正确对齐。
虽然这些方法可以解决问题，但它们似乎更像是一种 hack 而不是真正的解决方案，而且如果标签文本/字体发生变化，我就必须手动调整标签宽度。
有没有更简单的方法来解决这种问题，同时保留简单的 HTML / CSS 呢？还是应该坚持传统的方法，硬编码宽度、使用 div 和表格等？
6
我可能因此而遭到批评，但我会使用表格。这并不是什么技巧，而且很容易维护。 - Yuriy Galanter
@YuriyGalanter 我支持你。CSS 界的人总是抱怨表格，但很少提供与之一样一致可靠的替代方案。 - A.R.
2
表格用于制作表格数据，您在此处拥有：标题列（<th>）和数据列。 - Roger Pate
@Ennui 我没有说是这样的。 - A.R.
1
@Ennui CSS 由于其缺点而无法完成数百种任务，而表格可以。这是其中之一：http://stackoverflow.com/questions/19458993/left-align-text-and-right-align-image-in-css。此外，最终用户并不关心它是否为表格，这留给 CSS 爱好者。 - A.R.
显示剩余7条评论
5个回答
4

设置标签的宽度大于最长标签文本应该足够了。

示例 CSS：

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

那么所有的输入框都会在350像素后对齐，这是您想要实现的效果吗？ http://jsfiddle.net/dKjpk/5/

“label”标签也需要display:inline-block吗？ - greener
你说得对，它的工作效果非常棒，不过我认为最好的解决方案是将标签向左浮动，将输入向右浮动，就像ravb79所说的那样。 - john Smith
我在问题中提到了这种方法。是的，它可以工作，但我真正想问的是是否有一种更简单、更易于变更的方式。 - A.R.
3

这是一个选项

ul {
  display: table;
}

li {
  display: table-row;
}

label, input {
  display: table-cell;
}

当然，您应该根据您的具体表单调整CSS，但这将为您提供表格布局而不会牺牲标记。这里是一个fiddle。
不错的解决方案。避免使用宽度属性，这很好！ :) 谢谢！ - podeig
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>

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

这里有一个fiddle

。

0

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接