我有一个<div>
400px 的固定高度,用于显示产品要点<li>
。如果我有 8 <li>
,它们非常适合给定的空间。如果我只有 4 个<li>
,那么<li>
. 如何使用 CSS 使<li>
空间均匀分布在 内部,<div>
而不是在底部留下任何额外的空间<div>
?
我发现了这个问题: 均匀分布或垂直排列列表项 ,这似乎非常相似,但没有选择的答案,也没有一个答案真正解决了问题。理想情况下,这只是 CSS 而不是 javascript 解决方案。
我有一个<div>
400px 的固定高度,用于显示产品要点<li>
。如果我有 8 <li>
,它们非常适合给定的空间。如果我只有 4 个<li>
,那么<li>
. 如何使用 CSS 使<li>
空间均匀分布在 内部,<div>
而不是在底部留下任何额外的空间<div>
?
我发现了这个问题: 均匀分布或垂直排列列表项 ,这似乎非常相似,但没有选择的答案,也没有一个答案真正解决了问题。理想情况下,这只是 CSS 而不是 javascript 解决方案。
我希望您没有li
' 作为 a 的直接子级div
,这将不是有效的 HTML。
要在 a 内均匀分布li
' ul
,您可以将ul
todisplay: 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+ 和所有其他浏览器中运行。