如何使用CSS在列表中保留缩进？

Question

我有以下代码：

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content li:before {
  content: "• ";
  color: green;
  margin-right: 10px;
  line-height: 34px;
  list-style-position: inside;
}

<div class="page-content">

  <ul>
    <li>short bullet</li>
    <li>short bullet</li>
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
  </ul>

</div>

请参阅JsFiddle

如您所见，如果列表项继续转到第二行，则会丢失li padding / margin。

有没有办法让后续行匹配到第一行？

Answer 1

您可以将margin-left:-20px添加到li:before

＆＃13;

＆＃13;

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}

.page-content li:before {
  content: "• ";
  color: green;
  margin-right: 10px;
  margin-left:-20px;
  line-height: 34px;
  list-style-position:inside;
}

＆＃13;

<div class="page-content">

  <ul>
    <li>short bullet</li>
    <li>short bullet</li>
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
  </ul>

</div>

＆＃13;

＆＃13;

＆＃13;

另一种解决方案可能是在text-indent:-1em

中使用li

＆＃13;

＆＃13;

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content li {
  text-indent: -1em
}
.page-content li:before {
  content: "• ";
  color: green;
  margin-right: 10px;
  line-height: 34px;
  list-style-position: inside;
}

＆＃13;

<div class="page-content">

  <ul>
    <li>short bullet</li>
    <li>short bullet</li>
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
  </ul>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一种做法。在li元素中添加一些左边距，然后使用绝对定位将标记向左移动。

该方法可以让您对标记的位置进行大量控制。 此外，如果更改标记元素的大小或样式，标记位置将保持稳定。

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content li {
  padding-left: 15px;
  position: relative;
}
.page-content li:before {
  content: "• ";
  color: @green;
  margin-right: 0px;
  line-height: 34px;
  position: absolute;
  left: 0;
  top: 0;
}

<div class="page-content">

  <ul>
    <li>short bullet</li>
    <li>short bullet</li>
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
  </ul>

</div>

Answer 3

简单地将margin-left: -20px;添加到.page-content li:before，
并可选择margin-left: 20px;至.page-content ul。

填充＃1 ：https://jsfiddle.net/swrufhzc/2/
填充＃2 ：https://jsfiddle.net/swrufhzc/3/