html - 如何使用动态内容指定动态列表高度？

Question

我有这样的列表:

<ul class='fixture'><li>...html table...</li></ul>
<ul class='fixture'><li>...html table...</li></ul>
<ul class='fixture'><li>...html table...</li></ul>

<ul class='fixture'><li>...html table...</li></ul>
<ul class='fixture'><li>...html table...</li></ul>
<ul class='fixture'><li>...html table...</li></ul>

我给 li 设置了 23 的高度，但是当我的 html 表格的内容超过 23 时，内容会干扰它下面的 li。我试图为 li 设置 min-height 并未指定高度，但这没有用。我想知道当内容的高度高于其他 li 时，是否有人可以帮助我增加 li 的高度？

Answer 1

考虑从您的 LI 中删除高度。高度可能用于分隔线条(如果我错了请纠正我)。一个简单的解决方案是将其转换为行高:

li {
  line-height:23px;
}

但是，这将使行间距均匀。您可能希望将 LI 分隔得比行多一点，以便在视觉上更好地将列表项行组合在一起。为此，添加填充和行高:

li {
  line-height:13px;
  padding-bottom:10px;
}

这是否为您提供了您正在寻找的效果？