html - 这是文本对齐是 Firefox 中的一个错误？

Question

在 Firefox 中打开这个简单的jsfiddle的呈现方式与在 Chrome 和其他浏览器中不同。

---

铬合金

---

火狐

---

实际上，我一直试图让它在其他浏览器中看起来像 Firefox，即项目符号位置遵循文本的对齐方式。请注意，我还希望下一个列表项居中，即不根据第一个的项目符号位置对齐，请参见屏幕截图示例。有人知道方法吗？

我已经看到使用 的答案list-style-position: inside，但不能忍受项目符号和文本之间间隙差异的副作用。

<ul>
  <li style="text-align: center;">Hello I'm Centered</li>
</ul>

标签： htmlcsshtml-lists

Answer 1

您可以尝试使用类似的伪元素:before来在所有浏览器中获得所需的效果。通过设置，margin-right您也可以自己选择间距。

li{
  text-align:center;
  list-style:none;
}
li:before{
   content:'•';
   margin-right:7px
}

发生的事情是list-style:none隐藏了默认项目符号，并且通过使用:before您可以将其作为内联伪元素重新添加。