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小提琴所示。有人建议使用花车，但为什么这不起作用？

Answer 1

没有必要使用float。有很多方法可以使它发挥作用：

例如

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

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

Answer 2

如果要使用浮点数实现此效果，请将标签的display属性设置为block，声明其宽度，然后向左浮动它们。然后将您的输入向左浮动，我们清除：在标签元素上留下，这样它们就不会在一条线上全部结束。

所以：

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

input{
float:left; 
}

查看此fiddle中的结果。

您也可以使用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;
}

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

3 个答案: