垂直均匀分布或间隔列表项
Posted
技术标签:
【中文标题】垂直均匀分布或间隔列表项【英文标题】：Evenly distributing or spacing list items vertically 【发布时间】：2012-12-20 19:50:56 【问题描述】：我到处搜索，但建议没有做我正在寻找的。基本上，我的清单在 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>
【问题讨论】：
您是说在固定高度ul 内有随机数lis？
是的，我将ul 高度设置为#nav height: x px;
那么我现在能想到的唯一方法就是使用 javascript。
仅使用 html 和 css 就没有简单的方法吗？
使用width 甚至很难（如果可能的话）。我建议要么使ul 可扩展，要么使用固定数量的lis。
【参考方案1】：
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>
【讨论】：
这个解决方案的唯一问题是对弹性盒的最新版本的支持有限。实际上，您的代码不符合最新版本的 flexbox 规范。 是的，但最新版本不适用于我的 chrome。例如，我尝试了最新的 'flex-flow: column;'还有'-webkit-flex-flow: column;'但 lis 保持水平，'-webkit-box-orient: vertical;'一年前我尝试过的效果很好。这就是为什么我说'现在最好不要使用它'：D【参考方案2】：如果“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/
【讨论】：
如果我知道li 项目的数量（我知道），是否可以纯粹使用 HTML 和 CSS 来做到这一点？
然后你可以使用这里解释的东西 - ***.com/questions/8720931/…
我现在有了li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li width: 33.3333%; ，但它似乎并没有根据ul 的高度来分配它们。我的第一个列表项是随机定位的，其余的分布在第一个li 和底部ul 高度之间。
您需要调整高度，而不是宽度。在这里查看 - jsfiddle.net/HJ6X7
对不起，我确实有height。我给了错误的代码。它看起来像：#nav li:first-child:nth-last-child(3), #nav li:first-child:nth-last-child(3) ~ li height: 33.3333%; 但它仍然是我上次描述的同一个问题。【参考方案3】：
我刚刚在这里回答了一个类似的问题：https://***.com/a/16745192。
基本上，要在ul 中均匀分布li，您可以将ul 设置为display: table，将li 设置为li，然后使用伪元素进行渲染要点，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
【讨论】：
很棒的答案。还值得注意的是，如果你想为这些 LI 元素添加边框，你需要在你的 UL 上使用border-collapse:collapse - ***.com/a/10040881/802397以上是关于垂直均匀分布或间隔列表项的主要内容，如果未能解决你的问题，请参考以下文章