列表项目符号后强制换行

Question

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

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

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

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

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

强制将文本放在点下方，但一方面在每个列表项中的文本之前添加换行符会使来源非常混乱，另一方面，它没有达到我的预期，因为即使a 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>

Answer 2

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

演示 1

HTML（带br标签）

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

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

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

演示 2

HTML（无 br 标签）

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

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

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

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

列表项目符号后强制换行

Force line break after list bullets

html

css

list

alignment