【问题标题】：Unicode as bullet not indenting second lineUnicode 作为项目符号不缩进第二行
【发布时间】：2018-03-30 22:00:39
【问题描述】：

我有什么：

使用 Unicode 字符表示项目符号的无序列表。

我使用this 实现了这个问题的答案：Unicode character as bullet for list-item in CSS

我的问题：

我使用的解决方案仅对单行列表项有效。对于多行列表项，第二行（以及所有后续行）的文本，而不是缩进，位于项目符号下方。

我的代码：

ul {
  list-style: none;
  padding: 0px;
}

ul li:before {
  content: '\2713';
  margin: 0 1em;
  /* any design */
}

<ul>
  <li>Single-line.</li>
  <li>Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.
    Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.</li>
</ul>

我的问题：

是否有 CSS 解决方案（无需编辑标记）可以防止文本落在 Unicode 项目符号下？

【问题讨论】：

标签： html css unicode html-lists

【解决方案1】：

您可以在li 元素上使用display: flex 属性。或者你可以在li 元素上使用display: table，在伪元素上使用display: table-cell。 DEMO

ul {
  list-style: none;
  padding: 0px;
}
li {
  display: flex;
}
ul li:before {
  content: '\2713';
  margin: 0 1em;
}

<ul>
  <li>Single-line.</li>
  <li>Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.
    Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.</li>
</ul>

【讨论】：

我选择设置display:flex;。非常简单高效。感谢您提供纯 CSS 解决方案。我原本以为我会在<span> 中包装列表项文本。
对于display: table-cell;，我必须将项目符号的边距值分配给填充，因为边距值被忽略（fork）。对于display: flex; 方法，任何包含链接的列表项都会将链接压缩到列表项的右侧。我无法解决此问题，但您可以查看实际问题here。
使用 flex 最简单的解决方案是将 li 内容包装在一个 div 元素中，就像这样 jsfiddle.net/2ekzwyn5/7

【解决方案2】：

给li 一个左边距，然后对li:before 的宽度使用相同的值，对li:before 的左边距使用相同的值但为负值。记得将li:before 显示为inline-block，否则width 将不会被应用：

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

li {
  padding-left: 2em;
}

ul li:before {
  content: '\2713';
  display: inline-block;
  width: 2em;
  margin-left: -2em;
}

<ul>
  <li>Single-line.</li>
  <li>Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.
    Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line. Multi-line.</li>
</ul>

【讨论】：

感谢您提供替代解决方案。我选择了 Nenad Vracar 的答案，因为它需要一行代码。 IE。 display:flex;.
是的，flex 是一个不错的技巧，但如果你想支持旧版浏览器，你就不能使用它。
我没有考虑浏览器支持。谢谢。