Question

我想为<ul>创建彩色列表标记并且我已经完成了，但是现在所有列表中的list-style-position属性都不起作用。

以下是代码：

ul.FirmStyle {
  list-style-type: none;
}
ul.FirmStyle li:before {
  color: orange;
  content: "▪";
  list-style-position: outside;
  /* !!!!!! */
  margin-left: 10px;
}

<ul class="FirmStyle">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>

为什么？

Answer 1

根据BlueEyes，list-style-position属性控制标记项中标记伪元素的位置。

W3C Specs

此属性有助于控制列表项中:: marker伪元素的位置。

注意：请注意，只有在:: marker伪元素的content属性的used值不是none时才会生成标记。

此标记仅在其内容为空时生成，但是一旦将list-style-type设置为none，标记的内容将默认为无。由于没有创建标记，因此无需定位。

list-style-position

<强>无

列表项的标记 默认内容为无 。

^{（重点是我的）}

您必须通过相应调整左右边距，使用:before属性（或）手动定位position伪元素。以下代码段包含如何使用边距或定位（以及带list-style-position的输出进行比较）的示例。

＆＃13;

ul.FirmStyle{
  list-style-type: none;
}
ul.FirmStyle li:before{
  color: orange; 
  content: "▪";
}
ul.FirmStyle.with-margin li:before{
  margin: 0px 12px 0px -16px;
}
ul.FirmStyle.with-position li:before{
  position: relative;
  left: -16px;
}
ul.FirmStyle2{
  list-style-position: outside;
}

＆＃13;

<ul class="FirmStyle with-margin">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>
<ul class="FirmStyle2">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>
<ul class="FirmStyle with-position">
  <li>A lot of texttttttttttttttttt-t-t-t-tttttttt-tt-tt-tt-ttttt-t-tttttt-t-tttt-tttt</li>
  <li>Text</li>
</ul>

＆＃13;

Answer 2

迟到了，但是我也遇到了同样的问题！

对您的伪元素执行以下操作：

ul.FirmStyle li:before {
  color: orange;
  content: "▪";
  margin-left: -25px;  /* this is to move the icon left */
  padding-right: 10px; /* to keep some space between icon and text */
}

您不需要list-style-position: outside;

当list-marker是伪元素时，list-style-position不起作用。为什么？

2 个答案: