3

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

当我给li's属性 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;
}
4

3 回答 3

2

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

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

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

$(function () {
    $('#menu li').wrapInner('<span></span>');
});
于 2013-05-20T09:33:43.630 回答
1

使用display:table而不是display:table-cell. 它会起作用的。

于 2013-05-20T09:42:05.687 回答
-1

请改用span标签。

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

这是解决方案。

的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 的垂直对齐居中，并使它们看起来像是块状的。

希望这对现在有所帮助。

于 2013-05-20T09:26:54.423 回答