布置“标签-值”不使用表格居中

Question

通常，您会有许多标签（让我们使用姓名、年龄、颜色）以及每个标签的值！

如果我将这些放在 2 列 3 行表中，我可以确保这些值（让使用 Steve、19、Red）全部从相同的水平位置开始。

如果我希望将该列左对齐，并且如果我也希望将标签列右对齐。然后，这两列将在表格的中心很好地相遇。

我如何才能在不使用表格的情况下做到这一点，而且也不必设置固定宽度！

Answer 1

您将必须解决自己对标签使用固定宽度的问题（如果采用纯 CSS 路线）。下面是获得您想要实现的目标的最低限度（摘自 HTML Dog。）

CSS：

label {
    clear: left;
    float: left;
    width: 7em; /* or whatever length suits */
    text-align: right;
}

HTML：

<form>
    <div><label>Item 1</label><input /></div>
    <div><label>Item 2</label><input /></div>
    <div><label>Item 3</label><textarea></textarea></div>
</form>

如果您绝对不想要固定宽度，那么您可以使用此 javascript（带有 jQ​​uery）并删除上面 CSS 的固定宽度。值得注意的是，如果你让人们关闭 JavaScript，这看起来会很糟糕！

var largestWidth = 0;
$('label').each(
    function() {
        if ($(this).width() > largestWidth) {
            largestWidth = $(this).width();
        }
    });

$('label').each(
    function() {
        $(this).width(largestWidth);
    });

我在 JSFiddle 上给出了一个实例。

考虑到您引用的用例，我实际上认为表格是更好的方法，但是我有一个 对 table/div 表单辩论的看法与大多数人不同。

Answer 2

我猜你需要 javascript 来解决这个问题。我不相信有一个纯粹的 CSS 解决方案。

事实上，在标签宽度可能不同，或者宽度可能根据浏览器设置（如文本大小）而变化的多语言网站中工作时，使用固定宽度可能会出现问题......

Answer 3

我听到你在说什么，但我可以提醒你，表格可以用于表格数据！

但要使用纯 CSS 来执行此操作，您可以将标签和值向左浮动，然后清除，并将两个元素设置为宽度为 50% 的显示块。

Answer 4

您也可以使用 UL LI 列表来安排此操作。

<fieldset>

<legend>Sign-up Form</legend>
<form name="signup" action="index.html" method="post">
<ul> 
<li> <label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</li> 
<li> <label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>



<li> <label for="psw">Password</label>
<input type="text" name="psw" id="psw" size="30" />
</li>



<li> <label for="free">Free Subscrition</label>
<input type="radio" name="subscription" id="free"/>
</li>

<li><label for="submit"></label>
<button type="submit" id="submit">Send</button> </li> 
<ul>
</form>

</fieldset>

css

fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style:none;
}
fieldset li{
clear:both;
list-style:none;
padding-bottom:10px;
}

fieldset input{
float:left;
}
fieldset label{
width:140px;  // or you give width in % here
float:left;
}