垂直空間列表項垂直

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