這是<ul><li>文本對齊是 Firefox 中的一個錯誤？

Question

在 Firefox 中打開這個簡單的jsfiddle呈現與在 Chrome 和其他瀏覽器中不同。

---

鉻合金

---

火狐

---

我實際上一直試圖讓它在其他瀏覽器中看起來像 Firefox，即項目符號位置跟隨文本的對齊方式。 請注意，我還希望下一個列表項居中，即不根據第一個的項目符號位置對齊，請參閱屏幕截圖示例。 有人知道方法嗎？

我已經看到使用list-style-position: inside答案，但無法忍受項目符號和文本之間差距的副作用。

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

Answer 1

您可以嘗試使用偽元素，例如:before以在所有瀏覽器中獲得所需的效果。 通過設置margin-right您也可以自己選擇間距。

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

發生的事情是list-style:none隱藏默認的項目符號，並通過使用:before be， :before才可以將其添加為內聯偽元素。

Answer 2

傳統上，瀏覽器相當自由，它與列表中的點完全無關。 我可以輕松想象出Firefox解決方案可以提供更好的渲染的情況。

如果<li>遇到麻煩，請將文本對齊方式向下移動一個元素，即添加一個輔助元素：

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

缺點是，僅出於樣式原因而引入元素，但以我的經驗，在這種孤立的情況下，實用主義勝於純粹主義。

Answer 3

您可以將樣式賦予<ul>而不是<li> 。