均匀地垂直分布或间隔列表项

Question

我到处搜索,但建议不是我正在寻找的.基本上,我的列表在ul里面.ul的高度已设置为精确的大小.我希望里面的列表项相对于彼此具有相等的间距,以及相对于ul容器的顶部和底部(即高度所在的位置) - 所以空间都是相同的大小.你怎么做到这一点？

<ul id="nav">
    <li><a href="index.html" id="tab">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

Answer 1

我刚刚在这里回答了类似的问题:https://stackoverflow.com/a/16745192.

基本上,要li在a内均匀分布ul,你可以设置ulto display: table和li's to display: table-row,然后使用伪元素来渲染项目符号点,它适用于IE8 +和所有其他浏览器:

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