Safari上的Square Bullet点？

Question

对于一个项目，我需要一行正方形的点

---

---

这是在Chrome中渲染的裁剪图像。这是代码：

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

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

---

---

我想让它了解它在Safari上的Chrome浏览器中的运行情况。我已经做过一些研究，有人说要使用带有该方形符号的字体（可行），但是我已经在使用大量图像和其他资源，而且我无法再花更多的时间来加快加载速度。我尝试在display: inline;上进行ul，但它只是删除了要点。这就是为什么我添加了方形符号。我也希望它是方形的项目符号而不是圆形的项目符号。是否有一些通用的unicode字符？我还使用了垂直的方形点行，因此我希望能够在两行上获得相同的字符/大小，以便它们看起来相同。任何想法或建议都将不胜感激。

Answer 1

所有主要的浏览器（包括Safari）都支持 list-style-type CSS属性（style="list-style-type:square"）

<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>

Answer 2

您可以使用纯CSS创建正方形：

httpd

node

Answer 3

感谢您提供所有答案。在此插入用户名确实有帮助。我没有使用<meta>标记来定义我的charset。然后，我使用了这个元标记

<meta charset="UTF-8">

这在Safari上给了我一个黑色方形的表情符号，但是谷歌的快速搜索告诉我要在块的末尾添加︎，这样我的新工作代码便是

.horizontal-status li {
  display: inline;
}

<ul class="horizontal-status">
      <li class="status-selected">▪&#xFE0E;</li>
      <li>▪&#xFE0E;</li>
      <li>▪&#xFE0E;</li>
      <li>▪&#xFE0E;</li>
      <li>▪&#xFE0E;</li>
  </ul>

希望这会有所帮助