html - Safari 上的方形元素符号点？

Question

对于一个元素，我需要一排方点

---

---

这是在 Chrome 中呈现的裁剪图像。这是代码:

<ul class="horizontal-status">
    <li class="status-selected">▪</li>
    <li>▪</li>
    <li>▪</li>
    <li>▪</li>
    <li>▪</li>
</ul>

这正是我想要的，但在 Safari 中它看起来像这样:

---

---

我想让它看看它在 Safari 上的 Chrome 上的表现如何。我做了一些研究，有人说要使用带有那个方形元素符号点的字体(可行)，但我已经在使用一堆图像和其他资源，我不能再增加加载速度了。我试过在 ul 上执行 display: inline; 但它只是删除了要点。这就是我添加方形符号的原因。我还希望它是方形元素符号点而不是圆形元素符号点。是否有一些通用的unicode字符？我还使用了垂直行的方点，所以我希望能够在两行上获得相同的字符/大小，以便它们看起来相同。非常感谢任何想法或建议。

Answer 1

list-style-type 所有主流浏览器都支持 CSS 属性 ( style="list-style-type:square" )，包括 Safari:

<ul style="list-style-type:square">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

要水平显示列表，可以添加float: left至 <li>. Note that you'll also want margin-left` 以防止元素堆叠在一起。这可以从以下方面看出:

li {
    float: left;
    margin-left: 25px;
}

<ul style="list-style-type:square">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>