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

我到处都找过了，但这些建议并不是我想要的。基本上，我有我的名单内的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>

下面是一个在我的chrome上工作的示例。（注意，由于规范可能会更改，因此最好现在不要使用它）

美国联邦制药公司{
高度：500px；
宽度：200px；
边框：1px实心#ccc；
显示：-网络工具包盒；
-网络工具包盒方向：垂直；
-webkit盒包：证明；
}
.内部{
-webkit-flex:1；
-网络工具包订单：0；
}

第一项
第二项
第三项
第四项

下面是一个在我的chrome上工作的示例。（注意，由于规范可能会更改，因此最好现在不要使用它）

美国联邦制药公司{
高度：500px；
宽度：200px；
边框：1px实心#ccc；
显示：-网络工具包盒；
-网络工具包盒方向：垂直；
-webkit盒包：证明；
}
.内部{
-webkit-flex:1；
-网络工具包订单：0；
}

第一项
第二项
第三项
第四项

如果“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>

#导航{高度：x px；}





var listItems=document.querySelectorAll（“ul#nav>li”）；
对于（var l=0；l

可以在以下位置找到一个临时示例：

如果“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>

#导航{高度：x px；}





var listItems=document.querySelectorAll（“ul#nav>li”）；
对于（var l=0；l

---

可以在以下位置找到一个临时示例：

我刚才在这里回答了一个类似的问题：

基本上，要在

ul

中均匀分布

li

，可以将

ul

设置为

display:table

，将

li

设置为

display:table row

，然后使用伪元素渲染项目符号：

---

这里有一个

我刚才在这里回答了一个类似的问题：

基本上，要在

ul

中均匀分布

li

，可以将

ul

设置为

display:table

，将

li

设置为

display:table row

，然后使用伪元素渲染项目符号：

---

---

这里有一个

你是说你在一个固定高度内有随机数

li

s

ul

？是的，我把

ul

高度设置为

#nav{height:x px；}

，那么我现在能想到的唯一方法就是使用JavaScript。仅仅使用html和css没有简单的方法吗？这甚至很难（如果可能的话）要使用

宽度执行此操作

。我建议将

ul

扩展，或者使用固定数量的

li

s。你是说在固定高度

ul

内有随机数

li

s吗？是的，我将

ul

高度设置为

#nav{height:x px；}

那么我现在能想到的唯一方法就是使用JavaScript。仅仅使用html和css没有简单的方法吗？使用

width

甚至很难做到这一点（如果可能的话）。我建议让

ul

可扩展，或者使用固定数量的

li

s。此解决方案唯一的问题是对flexbox最新版本的支持有限。实际上，您的代码不符合flexbox规范的最新版本。是的，但最新版本不适用于我的chrome。例如，我尝试了最新的“flex-flow:column；”还有“-webkit flex-flow:column；”但是保持水平，'-webkit框方向：垂直；'我一年前试过，效果很好。这就是为什么我说“最好现在不要使用它”：d此解决方案的唯一问题是对最新版本的flexbox的支持有限。实际上，您的代码不符合flexbox规范的最新版本。是的，但最新版本不适用于我的chrome。例如，我尝试了最新的“flex-flow:column；”还有“-webkit flex-flow:column；”但是保持水平，'-webkit框方向：垂直；'我一年前试过，效果很好。这就是为什么我说“最好现在不要使用它”：如果我知道

li

项目的数量（我知道），是否可以纯粹使用HTML和CSS来做呢？然后你可以使用这里解释的东西-我现在有

li:first child:n last child（3），li:first child:n last child（3）~li{width:33.3333%；}

但它似乎没有将它们分发到

ul {
    height: 300px;
    display: table;
}
li {
    display: table-row;
}
li:before {
    content:'•';
    float: left;
    width: 20px;
    font-size: 1.8em;
    line-height: 0.75em;
}