Safari上的方形项目符号？答案

【问题标题】：Square Bullet Points on Safari?Safari上的方形项目符号？
【发布时间】：2018-09-17 00:02:26
【问题描述】：

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

这是在 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 字符？我还使用了一排垂直的方点，所以我希望能够在两行上获得相同的字符/大小，以便它们看起来相同。非常感谢任何想法或建议。

【问题讨论】：

您是否设置了正确的charset？这在哪个版本的 Safari 中会失败？它在 iOS 上的 Safari 中看起来不错。
@insertusernamehere 我没有使用任何东西，但是当我使用 UTF-8 时，它给出了 emjoi 块，所以我无法更改颜色。 UTF-8 是最好的工作人员。

标签： html css unicode

【解决方案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 wantmargin-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>

【讨论】：

@Obsidian_Age 你能在水平列表中给出这个例子吗？正如我在我的分析中所说，它似乎删除了要点。感谢您的快速回复。
您可以将float: left 与margin-left 一起应用于<li> 以使其水平显示，从而保留方形项目符号点。我不太确定您的自定义 CSS 规则如何将您的项目符号点转换为水平显示，但它们将与简单的 float 叠加。您可能还需要margin。我已经更新了我的答案以显示这个工作水平:)

【解决方案2】：

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

.horizontal-status,
.vertical-status{
  list-style: none;
}

.horizontal-status li {
  display: inline-block;
  margin: 0 4px;
  width: 5px;
  height: 5px;
  background: blue;
}

.horizontal-status li.status-selected,
.vertical-status li.status-selected{
  background: red;
}

.vertical-status li {
  display: block;
  margin: 10px 0;
  width: 5px;
  height: 5px;
  background: blue;
}

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

<ul class="vertical-status">
  <li class="status-selected"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

【讨论】：

【解决方案3】：

感谢您的所有回答。 Insertusernamehere 的评论真的很有帮助。我没有使用<meta> 标签来定义我的charset。然后我使用了这个元标记

<meta charset="UTF-8">

这在 Safari 上给了我一个黑色方形表情符号，但快速的谷歌搜索告诉我将 &#xFE0E; 添加到块的末尾，所以我的新工作代码是

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

希望对你有帮助

【讨论】：