Question

我正在使用以下代码在<li>标签之前添加自定义项目符号字符：

.cb-entry-content ul, .cb-sidebar ul {
    list-style-type: none;  
}
.cb-entry-content li::before, .cb-sidebar li::before {
    content: "•";
    margin-right: 5px;
    color: #821019;
    font-weight: 700;
}

我现在如何缩进整个<li>项目，以便相对于项目符号缩进整个项目？通常，使用<li>可以使用list-style-position: outside;完成此操作，但这在这里不起作用。有什么想法吗？

谢谢！

edit：抱歉，我不太清楚-我希望缩进在换行后继续缩进-以便项目符号在左侧，并且整个<li>缩进之后。目前，在换行后，文本会自动在项目符号下方包裹。

Answer 1

您可以使用margin或text-indent，都可以。

Fiddle here

ul.custom {
    list-style-type: none;  
}

ul.custom li:before {
    content: "•";
    margin-right: 5px;
    color: #821019;
    font-weight: 700;
}

ul.custom li:nth-child(1) {
  text-indent: 1em;
  margin-left: 10px;
}

ul.custom li:nth-child(2):before {
  margin-right: 25px;
}

<ul class="custom">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Answer 2

您可以使用负边距来获得想要的效果，请参见下面的示例。

ul {
  list-style-type: none;  
}
li::before {
  content: "•";
  margin-right: 5px;
  color: #821019;
  font-weight: 700;
}

ul.with-margin {
  margin-left: 10px; 
}

.with-margin li::before {
  margin-left: -10px;
}

<ul>
  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
</ul>

<ul class="with-margin">
  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
  <li>Looooooooooooong text is very long, like it might even be multiple rows and that kills the custom style of your list items</li>
</ul>

使用:: before创建项目符号后缩进整个列表项

2 个答案: