Question

我有一个li's列表，其display:table-cell属性为vertically center内部文本。我不能为此使用额外的标记。我无法使用line-height，因为可能有多行文字。

当我将li's提供给display:table-cell属性时，他们float彼此相邻。

我怎样才能强迫他们低于对方，就像他们display:block?那样或者我不能呢？

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>');
});

Answer 2

使用display:table代替display:table-cell。它会起作用。

Answer 3

改为使用span标记。

<li><span>li</span></li>
<li><span>li</span></li>

这是solution。

HTML：

  <ul>
    <li><span>li</span></li>
    <li><span>li</span></li>
    <li><span>li</span></li>
    <li><span>li</span></li>
    <li><span>li</span></li>
    <li><span>li</span></li>
  </ul>

CSS：

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

ul li {display:block;}

通过在li内部插入span标签，可以确保可以保持li的垂直对齐位置，并使它们看起来像块一样。

希望现在有所帮助。

如何防止显示：表格单元格浮动？

3 个答案: