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内均匀分发ul，您可以将ul设置为display: table，将li设置为{{{} 1}}，然后使用伪元素渲染项目符号点it works in IE8+ and all other browsers：

display: table-row

这是 jsFiddle

Answer 2

CSS Flexible Box Layout Module可能是你想要的，下面是一个工作样本现在适用于我的chrome。（注意，因为规范可能会改变，所以现在最好不要使用它）

<html>
    <head>
        <style>
            .flex-ul {
                height: 500px;
                width: 200px;
                border: 1px solid #ccc;
                display: -webkit-box;

                -webkit-box-orient: vertical;
                -webkit-box-pack: justify;
            }
            .inner {
                -webkit-flex: 1;
                -webkit-order: 0;
            }
        </style>
    </head>
    <body>
        <ul class="flex-ul">
            <li class="inner">Item one
            <li class="inner">Item two
            <li class="inner">Item three
            <li class="inner">Item four
        </ul>
    </body>
</html>

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

2 个答案: