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（使用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。

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

在不使用表的情况下将“标签 - 值”布局到中心

4 个答案: