CSS：空格< li>所以它们均匀地分布在< div>固定的高度

本文介绍了CSS：空格&lt; li&gt;所以它们均匀地分布在&lt; div&gt;固定的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有一个固定高度为400px的< div> ，其中使用< li> 。如果我有8 < li> ，它们在给定的空间中非常合适。如果我只有4 < li> ，那么< li> 下面会有很多额外的空白空间， 。我如何使用CSS在< div> 中均匀地制作< li> 空间，而不是留下任何在< div> ？ 底部有额外的空间，我发现这个问题： 垂直分配或间隔列表项目 似乎是非常相似，但没有选择答案，没有答案真正解决问题。理想情况下，这只是CSS而不是JavaScript解决方案。解决方案我希望你没有 li> 作为 div 的直接子元素，这将不是有效的HTML。 要在 ul 中均匀分配 li 的内容，您可以设置 ul 至 display：table 和 li 的至 display：table -row ： ul { height：300px; display：table; } li { display：table-row; } li：之前{ content：'•'; float：left; width：20px; font-size：1.8em; line-height：0.75em; } 这是一个 jsFiddle p如果您有 div 包装 ul ，并且您希望 li 的在 div 内垂直均匀分布，您只需要在 ul 的 height 设置为 div c $ c> 100％。 编辑 我意识到这个解决方案在任何版本的IE中都不能很好地发挥作用，这个更新的版本通过在伪元素内部渲染子弹点，然后设置 font-size ， line-height 和 width 来让它看上去很好， 它适用于IE8 +和所有其他浏览器。 I have a <div> with a fixed height of 400px in which to display product bullet points using <li>. If I have 8 <li>, they fit pretty well in the space given. If I have only 4 <li>, there is a lot of extra white space below the <li>. How can I use CSS to make the <li> space evenly within the <div> instead of leaving any extra space in the bottom of the <div>?I found this question:Evenly distributing or spacing list items verticallywhich seems to be pretty similar but there is no chosen answer and none of the answers really solve the problem. Ideally this would be just CSS not a javascript solution. 解决方案 I hope you don't have li's as direct children of a div, this would not be valid HTML.To evenly distribute li's inside a ul, you could set the ul to display: table and the li's to display: table-row:ul { height: 300px; display: table;}li { display: table-row;}li:before { content:'•'; float: left; width: 20px; font-size: 1.8em; line-height: 0.75em;}Here's a jsFiddleIf you have a div wrapping the ul, and you want the li's to be evenly spaced vertically inside this div, all you'd need to change is setting the fixed height on the div instead, and setting the ul's height to 100%.EditI realised the solution didn't play well in any version of IE, this updated version fixes that by rendering the bullet point inside the pseudo element, and it then set the font-size, line-height and width on the pseudo element to get it to look good and line things up, it works in IE8+ and all other browsers. 这篇关于CSS：空格&lt; li&gt;所以它们均匀地分布在&lt; div&gt;固定的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！