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>

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

Answer 1

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

li {
  line-height:23px;
}

但是，这将保持线条均匀分布。您可能希望将 LI 分开比行多一点，以便在视觉上将列表项行更好地组合在一起。为此，请添加填充以及行高：

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

这会给你想要的效果吗？

Answer 2

删除height您分配给li. 如果没有指定高度，它将自动调整。