列表项目符号后强制换行

Question

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

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

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

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

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

要强制将文本放在点下面，但是一方面在每个列表项中的文本之前添加换行符会使源非常混乱而另一方面，它不会达到我的预期，因为即使使用{ {1}}由于每个点右侧的隐式边距，点在左侧略微出现。

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

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这些解决方案不会更改<li>默认行为。

DEMO 1 http://jsfiddle.net/u4p8bta6/

HTML（带有br标签）

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

CSS

ul {
    list-style-position: inside;
    background: yellow;
    overflow: hidden;
}

li {
    float: left;
    text-align: center;
}

DEMO 2 http://jsfiddle.net/u4p8bta6/2/

HTML（无标签）

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

CSS

ul {
    list-style-position: inside;
    background: yellow;
    overflow: hidden;
}

li {
    float: left;
    text-align: center;
}

li:before {
    content: "";
    display: block;
}