列表项目符号后强制换行

Question

我正在寻找任何好的方法来自动将列表光盘标记放在文本上方而不是左侧.像这样:

我目前正在使用类似的东西:

<li>
    <br />
    Item 1
</li>

<li>
    <br />
    Item 2
</li>

<li>
    <br />
    Item 3
</li>

要强制将文本放在点下,但是一方面在每个列表项中的文本之前添加换行符会使源非常混乱而另一方面,它不会达到我的预期,因为即使text-align: center有点也会出现在左边,因为每个点右边的隐式边距.

也许我错过了一些CSS属性或者我的方法不好.欢迎任何建议,谢谢.

Answer 1

li {
    display: inline-block;
    background: pink;
}
li::before {
    content:'•';
    display: block;
    text-align: center;
}

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>