空間相鄰的兒童同樣使用CSS

我有要求間隔一套li元素equaly。需要注意的是，某些元素可以通過類CSS隱藏。空間相鄰的兒童同樣使用CSS

<ul class="list-spacing"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five</li> 
    <li>Six</li> 
</ul>

的CSS我有如下：

.list-spacing > li + li { 
    margin-top:10px; 
}

輸出看起來不錯。見小提琴這裏： https://jsfiddle.net/njphghpa/

現在，當我提到的一些li可以通過一類被隱藏如下：

<ul class="list-spacing"> 
    <li class='hidden'>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li class='hidden'>Four</li> 
    <li>Five</li> 
    <li>Six</li> 
</ul>

現在，我們得到的10px的不必要的上邊距第二01（含兩個）。見小提琴這裏：https://jsfiddle.net/mL11uogw/

所以我這樣做：

.list-spacing > li:first-child.hidden + li { 
    margin-top:0; 
}

在這裏看到小提琴：https://jsfiddle.net/zuLhome9/ 再次看起來不錯。

但問題是當前兩個或三個li被隱藏時，上述不起作用。 - https://jsfiddle.net/arryv6go/

我嘗試了不同的方法 - 在ul的上邊距設置爲-10px和所有兒童10px的上邊距和發生這種情況：https://jsfiddle.net/yzbnvmez/，這是隻要ul沒有邊界確定。但我想要一個。

有什麼辦法解決這個問題嗎？

來源

2017-06-19 Arun

這裏是我能想到的最簡單的辦法：

您需要添加margin-top:10px到每 li元素，然後刪除通過在列表頂部的縫隙設置::before僞元素margin-top到-10px

.list-spacing::before { 
    content: ""; 
    display: block; 
    margin-top: -10px; 
} 
.list-spacing > li { 
    margin-top:10px; 
}

小提琴：https://jsfiddle.net/JacobDesight/njphghpa/3/

來源

2017-06-19 13:11:29

尼斯建議！這樣，不需要父元素。 +1 –

優秀。謝謝！ – Arun

您可以使用Flexbox來解決此問題。

.hidden { 
 
    display: none; 
 
} 
 
.list-spacing{ 
 
    margin: 0; 
 
    padding: 0; 
 
    border: solid 1px red; 
 
} 
 
ul { 
 
    display: flex; 
 
    flex-flow: column; 
 
    justify-content: flex-start; 
 
    align-items: flex-start; 
 
} 
 

 
li { 
 
    list-style: none; 
 
    margin-top: 10px; 
 
}

<ul class="list-spacing"> 
 
    <li class='hidden'>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li class='hidden'>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
</ul>

來源

2017-06-19 12:47:08 Gerard

感謝傑拉德，但我想10px的的間距。 – Arun

只要ul元素沒有設定的高度，這將不起作用。 –

這個選擇應該做的事情，你需要：

.list-spacing > li:not(.hidden) + li, 
.list-spacing > li:not(:first-of-type) + li{ 
    margin-top:10px; 
}

https://jsfiddle.net/pbzg39wg/1/

來源

2017-06-19 12:55:11 Johannes

不錯的一個！但是如果連續有兩個隱藏元素，則無法工作：https://jsfiddle.net/webtiki/pbzg39wg/2/ –

.list-spacing > li:not(.hidden) { 
    margin-top:10px; 
}

使用:not()選擇排除與所有元素班。

來源

2017-06-19 12:56:52 user5014677

最簡單也最穩健的方法要達到您的目標是使用您在答案結尾處提到的使用ul元素上的負頂部邊距的技巧。負邊界是完全有效的BTW，see w3.org margin properties。
雖然它需要添加一個父元素，以防止前一個和下一個兄弟重疊，並給所有元素的邊框。這裏是您的標記的例子：

.wrap { 
 
    overflow: hidden; 
 
    border: solid 1px red; 
 
} 
 

 
.list-spacing { 
 
    margin: -10px 0 0; 
 
    padding: 0; 
 
} 
 

 
.list-spacing>li { 
 
    margin-top: 10px; 
 
    border:1px solid green; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<div class="wrap"> 
 
    <ul class="list-spacing"> 
 
    <li class='hidden'>One</li> 
 
    <li class='hidden'>Two</li> 
 
    <li>Three</li> 
 
    <li class='hidden'>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    </ul> 
 
</div>

來源

2017-06-19 13:02:20

謝謝。這絕對是一種選擇。只是想知道是否有任何CSS黑客無需另一個元素使這項工作。 – Arun

如果你的'ul'有一個固定的高度，你可以選擇flexbox解決方案，否則除了這個解決方案以外我沒有其他建議。 –

KISS：保持簡單，愚蠢的是我的工作的口頭禪。如何更換margin-top與margin-bottom？這應該可以解決你的問題。

把一切都以0利潤，然後在你的ul是最好的選擇，因爲網絡忻表明陰性切緣。

ul{ margin-bottom: -10px; margin-top: 0; } 
li{ margin-bottom: 10px; }

https://jsfiddle.net/3fsofxa8/

來源

2017-06-19 13:05:17 gaynorvader

你的口頭禪也是我的咒語！但是，我在UL的底部獲得了額外的差距。我想讓最後一個LI觸摸底部邊框。 – Arun

感謝 - 但我還是失去了下邊框 - https://jsfiddle.net/3fsofxa8/2/這類似於負上邊距我已經在我的問題 – Arun

空間相鄰的兒童同樣使用CSS

回答

相關問題