<ul> 中 <li> 元素的自定义项目符号是常规字符，而不是图像

Question

我意识到可以使用 CSS 属性将自定义图形指定为替换项目符号字符：

 list-style-image

然后给它一个 URL。

但是，就我而言，我只想使用“+”符号。我不想为此创建图形然后指向它。我宁愿只指示无序列表使用加号作为项目符号。

可以这样做还是我必须先将其制作成图形？

原文由 idStar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

以下内容引自 《驯服清单》 ：

有时您可能有一个列表，但您不想要任何项目符号，或者您想要使用其他一些字符来代替项目符号。同样，CSS 提供了一个直接的解决方案。只需添加 list-style: none;按照您的规则并强制 LI 以悬挂缩进显示。规则看起来像这样：

 ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

填充或边距需要设置为零，另一个设置为 1em。根据您选择的“项目符号”，您可能需要修改此值。负文本缩进导致第一行向左移动该量，从而创建悬挂缩进。

HTML 将包含我们的标准 UL，但可以使用您想使用的任何字符或 HTML 实体来代替列表项内容之前的项目符号。在我们的例子中，我们将使用 »，右双角引号：»。

» 项目 1

» 项目 2

» 项目 3

» 项目 4

» 我们将制作第 5 项

长一点这样

它会包裹

原文由 TJ WealthEngine API Evangelist 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是一个迟到的答案，但我刚刚遇到这个……要在任何换行的行上正确缩进，请尝试这种方式：

 ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

原文由 Mike T 发布，翻译遵循 CC BY-SA 3.0 许可协议