我有一个 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;
}
最佳答案
将 li
:s 设置为 table-row
并将 table-cell
样式移动到您的 a
元素(假设你有一个 ul li a
设置)
(写在手机上)
Edit2:如果您缺少 a
:s,您可以使用 JS 添加它们(或 span
):
$(function () {
$('#menu li').wrapInner('<span></span>');
});
关于html - 如何防止显示 :table-cell elements from floating?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16646025/