Html 狩猎中的方形弹头？

对于一个项目，我需要一排圆点

---

---

这是用Chrome渲染的裁剪图像。代码如下：

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

▪
▪
▪
▪
▪

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

---

---

我想让它看看它在Safari浏览器上的表现。我做了一些研究，有些人说使用带有方形圆点的字体（可行），但我已经在使用大量图像和其他资源，我无法再增加加载速度。我试过做

display:inline在
ul
上，但它只是删除了要点。这就是我添加方形符号的原因。我也希望它是方形的，而不是圆形的。是否有一些通用的unicode字符？我还使用了一行垂直的圆点，所以我希望能够在两行上获得相同的字符/大小，使它们看起来相同。非常感谢您的任何想法或建议。
所有主要浏览器都支持CSS属性（
style=“list style type:square”
）



项目
项目
项目
项目
所有主要浏览器都支持CSS属性（
style=“list style type:square”
），包括Safari：



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


。水平状态，
.垂直状态{
列表样式：无；
}
.水平状态李{
显示：内联块；
利润率：0.4px；
宽度：5px；
高度：5px；
背景：蓝色；
}
.水平状态li.status-selected，
.垂直状态li.已选择状态{
背景：红色；
}
.垂直状态李{
显示：块；
利润率：10px0；
宽度：5px；
高度：5px；
背景：蓝色；
}













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


。水平状态，
.垂直状态{
列表样式：无；
}
.水平状态李{
显示：内联块；
利润率：0.4px；
宽度：5px；
高度：5px；
背景：蓝色；
}
.水平状态li.status-selected，
.垂直状态li.已选择状态{
背景：红色；
}
.垂直状态李{
显示：块；
利润率：10px0；
宽度：5px；
高度：5px；
背景：蓝色；
}













谢谢您的回答。InsertUserName这里的评论真的很有帮助。我没有使用
标记来定义我的
字符集。然后我使用了这个元标记

<meta charset="UTF-8">


▪︎
▪︎
▪︎
▪︎
▪︎
谢谢您的回答。InsertUserName这里的评论真的很有帮助。我没有使用
标记来定义我的
字符集。然后我使用了这个元标记

<meta charset="UTF-8">


▪︎
▪︎
▪︎
▪︎
▪︎
@Obsidian_Age您能给出一个横向列表并举例说明吗？这似乎消除了我在回答中提到的要点。感谢您的快速响应。您可以将
上的
float:left
与
边距left
结合使用，使其水平显示，从而保留方形项目符号。我不太清楚自定义CSS规则是如何将项目符号转换为水平显示的，但它们将使用一个简单的
float
来堆叠。您可能还需要
边距
。我已经更新了我的答案，以显示这是横向工作：）@Obsidian_Age你能在横向列表中给出这方面的例子吗？这似乎消除了我在回答中提到的要点。感谢您的快速响应。您可以将
上的
float:left
与
边距left
结合使用，使其水平显示，从而保留方形项目符号。我不太清楚自定义CSS规则是如何将项目符号转换为水平显示的，但它们将使用一个简单的
float
来堆叠。您可能还需要
边距
。我已经更新了我的答案，以显示这个水平工作：）你设置了正确的吗？在哪个版本的Safari中会失败？它在iOS上的Safari中看起来不错。@InsertUserName在这里我没有使用任何东西，但当我使用
UTF-8
时，它给出了emjoi块，因此我无法更改颜色
UTF-8
是最有效的。您是否设置了正确的值？在哪个版本的Safari中会失败？它在iOS上的Safari中看起来不错。@InsertUserName在这里我没有使用任何东西，但当我使用
UTF-8
时，它给出了emjoi块，因此我无法更改颜色<代码>UTF-8
是最有效的。