1

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

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

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

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

4

4 回答 4

2

您将不得不自己解决为标签使用固定宽度的问题（如果采用纯 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上举了一个活生生的例子。

鉴于您引用的用例，我实际上认为表格是更好的选择，但是我对表格/div 表格辩论的看法与大多数.

于 2010-09-29T16:38:58.850 回答
1

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

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

于 2010-09-29T16:36:58.837 回答
0

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

但是要使用纯 CSS 来做到这一点，您可以将标签和值向左浮动，然后清除，并将两个元素设置为 50% 宽度的显示块。

于 2010-09-29T16:35:03.193 回答
0

您也可以使用 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;
}
于 2010-09-29T16:39:24.580 回答