項目符號如何指向<li>標簽有邊框頂部使用 list-style-position: inside</li>

Question

我正在整理一個無序列表。 每個行項目包含多個元素（ <h>標簽、 <p>標簽等），並由top-border分隔。

默認情況下，項目符號點不在上邊框下方。 為了解決這個問題，我分配list-style-position: inside; 到<ul> 。 但是，列表的內容現在“包裹”在項目符號點周圍。 將項目符號點和內容垂直分開會很棒。

 li { border-top: 1px solid #000000 } ul.inside { list-style-position: inside; }

 <ul> <li> Item 1 <p> Content does not wrap around bullet point. Great. But border-top is not over the bullet </p> </li> <li> Item 2 </li> <li> Item 3 </li> </ul> <hr> <ul class="inside"> <li> Item 1 <p> Content wraps around the bullet point. Boo! But border-top is over the bullet though! </p> </li> <li> Item 2 </li> <li> Item 3 </li> </ul>

有沒有一種干凈的方法可以做到這一點？

Answer 1

給你 go

 li { border-top: 1px solid #000000 } ul.inside { list-style-position: inside; } ul { list-style: none; padding: 0; } li::before { Content: "•"; font-size: 25px; position: relative; top: 2px; padding-right: 5px; }

 <ul> <li> Item 1 <p> Content does not wrap around bullet point. Great. But border-top is not over the bullet </p> </li> <li> Item 2 </li> <li> Item 3 </li> </ul> <ul class="inside"> <li> Item 1 <p> Content wraps around the bullet point. Boo! But border-top is over the bullet though! </p> </li> <li> Item 2 </li> <li> Item 3 </li> </ul>

Answer 2

使用 CSS 網格找到了一個創新的解決方案，由Modern CSS提供。 <li>標簽中的內容包含在<div>中，這一點很重要。

也就是說，此解決方案需要:before並且不適用於::marker 。

 ul { padding: 0; } li { border-top: 1px solid #000000; display: grid; grid-template-columns: 0 1fr; grid-gap: 1em; } ul li::before { content: '•'; font-size: 1em; }

 <ul> <li> <div> <div>Hello</div> <div>Second div</div> </div> </li> <li> Bullet 2 </li> <li> Bullet 3 </li> </ul>