Question

我用HTML制作了一个列表，但是我想要带有复选标记的投票箱，而不是默认的子弹，所以我添加了一些CSS：

＆＃13;

ul {
  list-style: none;
}
li::before {
  content: "\2611";
}

＆＃13;

<ul>
  <li>Long text</li>
  <li>Long text</li>
  <li>Long long text</li>
</ul>

＆＃13;

一切都近乎完美，但当<li>中的文本至少占用两行时，第二行开始时没有空格。

简单来说，新行的第一个字母不应该在子弹下但在前一行的第一个字母下面。

我没有任何线索如何去做。

Answer 1

您可以调整li文本缩进和填充以在必要时对齐自定义内容。

＆＃13;

ul { list-style: none; }

li { text-indent: -20px; margin: 10px 0;}


li::before { content: "\2611"; color: #a00; padding-right: 5px; }

＆＃13;

<ul>
<li>Long text</li>
<li>Long text</li>
<li>Long long text Long long text Long long text Long long text Long long text Long long text </li>
<li>Long text</li>
<li>Long long text Long long text Long long text Long long text Long long text Long long text </li>
<li>Long text</li>
</ul>

＆＃13;

Answer 2

您可以将自定义图像添加为列表样式。这也将考虑间距问题。

ul {
  list-style-image: url('customimage.gif');
}

请查看here了解详情。

如何正确制作我自己的列表风格？

2 个答案: