垂直分布或间隔列出项目 [英] Evenly distributing or spacing list items vertically

问题描述

我搜索了无处不在，但建议不是我正在寻找的。基本上，我有我的列表里面一个ul。 ul的高度已设置为确切的大小。我想要里面的列表项具有相对于彼此相等的间距，以及相对于ul容器的顶部和底部（即高度来到的地方），即空间都是相同的大小。

I've searched everywhere, but the suggestions aren't doing what I'm looking for. Basically, I have my list inside a ul. The ul's height has been set to an exact size. I want the list items inside to have an equal spacing in relation to each other, as well as in relation to the top and bottom of the ul container (that's where the height comes in)—so the spaces are all the same size. How do you do this?

<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>

推荐答案

我刚刚回答了一个类似的问题： http://stackoverflow.com/a/16745192 。

I have just answered a similar question here: http://stackoverflow.com/a/16745192.

基本上，在 ul 中均匀分布 li ，您可以设置 ul 到 display：table 和 li 到 display：table-row ，然后使用伪元素来渲染项目符号，它在IE8 +和所有其他浏览器：

Basically, to evenly distribute li's inside a ul, you could set the ul to display: table and the li's to display: table-row, and then use a pseudo element to render the bullet points, it works in IE8+ and all other browsers:

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

这篇关于垂直分布或间隔列出项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！