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

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制作最小高度并且未指定高度，但这不起作用。我想知道当内容的高度高于其他li时，是否有人可以帮助我如何增加li的高度？

Answer 1

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

li {
  line-height:23px;
}

然而，这将使线条保持均匀间隔。您可能希望将LI的分隔线多一些，以便在视觉上将列表项行更好地组合在一起。为此，请添加填充以及行高：

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

这会给你带来你正在寻找的效果吗？

Answer 2

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