1

我到处搜索，但建议并没有做我想要的。基本上，我的清单在 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>
4

3 回答 3

5

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

基本上，要在 a 内均匀分布li' ul，您可以将ultodisplay: table和li's 设置为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

于 2013-05-25T00:59:27.553 回答
1

如果“li”项目的数量是随机的并且可以是任何东西，那么纯 HTML + CSS 解决方案看起来是不可能的。需要一些 JS 代码才能工作。

<style>
#nav { height: x px; }
</style>

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

<script>
var listItems = document.querySelectorAll("ul#nav > li");
for(var l = 0; l < listItems.length; l++) {
  listItems[l].style.height = Math.floor(x/listItems.length) + "px";
}
</script>

可以在以下位置找到一个临时示例：http: //jsfiddle.net/bKxUx/

于 2013-01-07T07:09:12.680 回答
1

CSS 灵活框布局模块可能是您想要的，下面是我的 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>
于 2013-01-07T07:03:37.203 回答