垂直均匀排列列表项 [英] Evenly space list items vertically

问题描述

我正在尝试使用CSS来垂直排列列表项的方式.

I am trying to find a way with CSS to evenly space list items vertically.

我希望每个列表项都具有固定不变的高度.我希望每个列表项之间的边距能够自动strecth，以便它具有相同的空间量，但margin:auto;无法正常工作.

I want each list item to have a fixed height that doesn't change. I want the margin in between each list item to automatically strecth so it has the same amount of space but margin:auto; is not working.

以下是代码段:

.container {
  border: 1px solid black;
  height: 500px;
  width: 400px;
}

.spaced {
  padding: 0;
  list-style: none;
}
.spaced li {
  border: 1px solid blue;
  height: 60px;
  margin: 15px;
}

<div class="container">
  <ul class="spaced">
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
  </ul>
</div>

因此，使用此代码段，我需要它，以便蓝色框保持相同的高度，并在垂直方向上均匀分布.如果黑框的高度发生变化，则蓝框仍将均匀分布.

So with this snippet I need it so the blue boxes will remain the same height and be spaced evenly vertically. If the black box changes in height then the blue boxes will still be evenly spaced.

我该怎么做?

推荐答案

您可以使用 Flexbox 和

You can do this with Flexbox and justify-content: space-around;

弹性物料均匀分布，因此两个相邻物料之间的空间相同.第一项和最后一项之后的空白空间等于两个相邻项目之间的空白空间.

Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.

.container {
  border: 1px solid black;
  height: 500px;
  width: 400px;
  padding: 10px;
  box-sizing: border-box;
}

.spaced {
  height: 100%;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0;
}
.spaced li {
  border: 1px solid blue;
  height: 60px;
}

<div class="container">
  <ul class="spaced">
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
  </ul>
</div>

这篇关于垂直均匀排列列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！