HTML li 显示为 table-cell 无法向右浮动

Question

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

一些 li 应该在左侧，另一个 - 在右侧。

但这里有问题:“正确的”从 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 指定显示值的 float 元素都具有用于显示 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/