当列表标记是伪元素时，列表样式位置不起作用。为什么？ [英] list-style-position does not work when list-marker is pseudo-element. Why?

问题描述

我想为< ul> 创建彩色列表标记，但我做到了，但是现在在所有列表中， list-style- position 属性不起作用。

I wanted to create colored list-markers for <ul> and I did it, but in all lists now the list-style-position attribute does not works.

这是代码：

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>

为什么？

推荐答案

按照 W3C规范，列表样式位置属性控制标记伪元素在列表项中的位置。

As per W3C Specs, the list-style-position property controls the positioning of the marker pseudo element in the list item.

列表样式位置

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

This property helps control the position of the ::marker pseudo-element in the list item.

注意：请注意，仅当content属性的使用值用于

Note: Note that a marker is only generated if the used value of the content property for the ::marker pseudo-element is not none.

仅当标记内容为空时才生成该标记列表样式类型至无标记的内容默认为无。由于未创建任何标记，因此没有任何位置。

This marker is generated only when the contents of it is none but once you set list-style-type to none the contents of the marker is defaulted to none. Since no marker is created there is nothing to position.

列表样式类型

无

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

The list item’s marker’s default contents are none.

^{（重点是我的）}

您必须放置：before 伪元素之前，请使用 position 属性（或）通过相应地调整左右边距来实现。下面的代码片段提供了有关如何使用边距或定位（以及带有 list-style-position 的输出进行比较）的示例。

You'd have to position the :before pseudo-element manually using the position attributes (or) by adjusting the left and right margins accordingly. The below snippet has samples on how to achieve it using margins or positioning (and also an output with list-style-position for comparison).

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;
}

<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>

这篇关于当列表标记是伪元素时，列表样式位置不起作用。为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！