html - 如何防止显示 :table-cell elements from floating?

Question

我有一个 li's 列表，它具有 display:table-cell 属性，以便垂直居中里面的文本。我不能为此使用额外的标记。我不能使用 line-height，因为可能有多行文本。

当我将 li 的 赋予 display:table-cell 属性时，它们 float 彼此相邻。

我怎样才能强制它们在彼此下方，就像它们使用 display:block 时那样？ 或者我不能？

http://jsbin.com/orijam/1/edit

li {
  height:50px;
  border:solid black;
  vertical-align:middle;
  min-width:100px;
  display:table-cell;
}
ul {
  border:solid red;
  width:100px;
  display:inline-block;
}

Answer 1

将 li:s 设置为 table-row 并将 table-cell 样式移动到您的 a元素(假设你有一个 ul li a 设置)(写在手机上)

编辑:http://jsfiddle.net/Z7Sgg/

Edit2:如果您缺少 a:s，您可以使用 JS 添加它们(或 span):

$(function () {
    $('#menu li').wrapInner('<span></span>');
});