html - 如何正确对齐多个标签文本框对（有和没有浮动）？

Question

我写了以下内容：

<ul>
    <li>
        <span class="filter">
            <label>Name: </label><input type="text"/>
        </span>
    </li>
    <li>
        <span class="filter">
            <label>Id: </label><input type="text"/>
        </span>
    </li>
</ul>​

CSS为：

span.filter{
    width: 50px;
}
input{
    text-align: right;
}
label{
    text-align: left;
}
ul{
    list-style: none;
}​

但结果如this fiddle所示。有些人建议使用浮点数，但为什么这不起作用？

Answer 1

没有必要使用float. 有很多方法可以让它工作：

例如。

label{
    display: inline-block;
    width: 200px;
    text-align: left;
}

http://jsfiddle.net/krL7z/7/

Answer 2

如果您想使用浮动来实现此效果，请将标签的 display 属性设置为 block，声明它们的宽度，并将它们向左浮动。然后将您的输入向左浮动，我们 clear:left 在标签元素上，这样它们就不会全部在一行上结束。

所以：

label{
display:block;
width:50px; /*arbitrarily determined */
float:left;
clear:left;
} 

input{
float:left; 
}

在这个小提琴中查看结果。

您也可以使用 display:inline-block （因此代码更少）来执行此操作，如 xiaoyi 的回答中所示。

另一种方法是使用表格单元格，（虽然有些人认为它们在语义上适合表单）不是您通常想要依赖的布局。

Answer 3

如果您知道可以限制您支持的浏览器（浏览器高于 IE7）和所有其他 Firefox、Chrome、Opera、Safari ......那么您可以使用 display:table 和 display:table -cell 以表格方式布局单元格 - 没有实际的表格标记。

span.filter 
{    
    display:table;
}
span.filter label, span.filter input
{    
    display:table-cell;
}