在不使用表格的情况下布置“标签 - 值”以居中答案

【问题标题】：Laying out "Label - Value" to center without use of tables在不使用表格的情况下布置“标签 - 值”以居中
【发布时间】：2011-04-18 22:22:55
【问题描述】：

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

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

如果我希望该列左对齐，并且我还希望标签列右对齐。然后这两列会在桌子的中心很好地相遇..

在不使用表格但又不必设置固定宽度的情况下，我怎么能做到这一点！

【问题讨论】：

瞧！当您在谈论其他完全不同的东西时提到 HTML 元素时，请注意这种混乱。伙计们，这是“标签 - 值对”，而不是 label - input 对，我想我们在这里讨论的形式。

标签： html css tabular

【解决方案1】：

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

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

【讨论】：

我也听到你在说什么（笑）使用表格来表示一个值似乎不正确，它更像是我眼中的列表！ - 我不能有固定的宽度，因为标签的宽度是可变的

【解决方案2】：

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

在标签宽度可能不同或宽度可能因浏览器设置（如文本大小）而变化的多语言站点中工作时，确实使用固定宽度可能会成为问题...

【讨论】：

【解决方案3】：

您将不得不自己解决为标签使用固定宽度的问题（如果采用纯 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（带有 jQuery）并从上面的 CSS 中删除固定宽度。值得注意的是，如果你让人们关闭 javascript，这看起来会很糟糕！

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

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

我在JSFiddle 上提出了一个活生生的例子。

鉴于您引用的用例，我实际上认为表格是更好的选择，但我有一个 differing opinion on the table/div form debate than most。

【讨论】：

感谢输入，无法设置宽度的原因是多语言网站。并引用这些似乎不是 css 解决方案，我会将您的解决方案标记为答案，因为它是我能看到我们得到的最接近的答案！谢谢

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

【讨论】：

问题指定“不必设置固定宽度”，因此您的 width:140px 无法正常工作。