垂直空间列表项垂直

Question

我试图找到一种方式与CSS均匀地空间列表项垂直。

我希望每个列表项都具有不变的固定高度。我希望每个列表项之间的边距自动增加，因此它具有相同的空间量，但有余量：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项目做到这一点是均匀分布的，这样相邻的两个之间的空间项目是一样的。第一个和最后一个项目之前的空白空间等于两个相邻项目之间的空间的一半。

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

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(); 
    });