0

我有一个<div>400px 的固定高度，用于显示产品要点<li>。如果我有 8 <li>，它们非常适合给定的空间。如果我只有 4 个<li>，那么<li>. 如何使用 CSS 使<li>空间均匀分布在 内部，<div>而不是在底部留下任何额外的空间<div>？

我发现了这个问题： 均匀分布或垂直排列列表项 ，这似乎非常相似，但没有选择的答案，也没有一个答案真正解决了问题。理想情况下，这只是 CSS 而不是 javascript 解决方案。

4

1 回答 1

2

我希望您没有li' 作为 a 的直接子级div，这将不是有效的 HTML。

要在 a 内均匀分布li' ul，您可以将ultodisplay: table和li's 设置为display: table-row：

ul {
    height: 300px;
    display: table;
}
li {
    display: table-row;
}
li:before {
    content:'•';
    float: left;
    width: 20px;
    font-size: 1.8em;
    line-height: 0.75em;
}

这是一个jsFiddle

如果你有一个div包装ul，并且你希望li's 在 this 中垂直均匀分布div，那么你需要更改的只是将 fixed 设置height在 the 上div，并将ul's设置height为100%。

编辑

我意识到该解决方案在任何版本的 IE 中都不能很好地发挥作用，这个更新的版本通过在伪元素内渲染项目符号点来解决这个问题，然后在伪元素上设置font-size,line-height和width使其看起来不错并排列东西起来，它可以在 IE8+ 和所有其他浏览器中运行。

于 2013-05-25T00:12:14.093 回答