项目符号如何指向<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>