Question

我尝试使用带有ul子项的li元素制作栏，显示为table-cell。

有些li应该在左侧，另一些{ - 1}应该在右侧。

但问题是：“正确的”走出ul直线。

HTML：

<ul style="height:50px;background:green;">
    <li>li-1</li>
    <li>li-2</li>
    <li style="float: right">li-3</li>
</ul>

CSS：

li {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
}

JSFiddle：http://jsfiddle.net/Yamaha/n4jrhx46/你会看到li-3离开了我的酒吧。我想让它回来（使用table-cell进行垂直对齐。在我的情况下，line-height不适合这里），但不知道如何。

如何解决这个问题？

Answer 1

具有指定显示值table-cell的任何浮动元素都具有显示block的计算值。见the CSS 2.1 spec, Section 9.7

所以你在那里失败了。相反，删除float:right并使用表格布局模型和文本对齐方式将内容移动到位。像

这样的东西

li {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
}
li:nth-child(3) {
    width:100%;
    text-align:right;
}

请参阅http://jsfiddle.net/n4jrhx46/5/

Answer 2

@Yamaha我建议你不要使用display:table-cell使用display:inline。

根据您建议的代码，您只需添加line-height即可垂直对齐。查看 DEMO 。

ul {
    vertical-align: middle;
    display: table;
    width: 500px;
}

li {
    display: inline;
    height: 50px;
    line-height: 50px;/* This property have been added*/
}
li.right{ float:right; padding-right:12px;}

显示为表格单元格的HTML li无法正确浮动

2 个答案: