Question

我正在尝试使用CSS来垂直均匀地分隔列表项。

我希望每个列表项都有一个不会改变的固定高度。我希望每个列表项之间的边距自动拉伸，因此它具有相同的空间量但是margin：auto;没有用。

这是片段：

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

所以使用这个片段我需要它，所以蓝色框将保持相同的高度并垂直均匀分布。如果黑盒子的高度发生变化，那么蓝色盒子仍然会均匀分布。

我该怎么做？

Answer 1

您可以使用 Flexbox 和justify-content: space-around;

执行此操作

Flex项目均匀分布，以便两个相邻项目之间的空间相同。第一个项目之前和最后一个项目之后的空白空间等于两个相邻项目之间空间的一半。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

Flexbox可以做到这一点：

.container {
  border: 1px solid black;
  height: 500px;
  width: 400px;
}
.spaced {
  padding: 0;
  margin: 0;
  height: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.spaced li {
  border: 1px solid blue;
  height: 60px;
  margin-left: 15px;
  margin-right: 15px;
}

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

Answer 3

您可以使用jQuery执行此操作。

这是更新的css，

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

.spaced {
  padding: 0;
  list-style: none;
  margin:0; //Additional 
}
.spaced li {
  border: 1px solid blue;
  height: 60px;
  margin: 15px;
  width: 370px; //Additional 
  float:left;   //Additional 
}

Js代码在下面，

   function setLiMargin(){
        var parentH = $(".container").height();
        var liCount = $(".container ul li").length;
        var liHeight = 60;
        var margin = parseInt((parentH/liCount - liHeight)/2);
        $('.spaced li').css('margin',margin+'px 15px');
    }

    $(document).ready(function(){
            setLiMargin();
    });

均匀空间列表垂直项目

3 个答案: