如何微调列表项目符号/编号的位置

Question

我用 HTML 制作了一个列表：

<ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol>   

当我在 Antennahouse Formatter 中渲染它时，结果如下：

我可以更改 CSS 中文本的缩进：

ol li {
    padding-left: 6.3mm;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}

padding-left 是深蓝色线表示的距离。 但我想改变数字的位置：它现在位于那个 6.3 毫米宽的空间的中心，我想将它对齐到那个空间的左侧（将数字移动到红线指示的位置）。

text-indent 和 margin-left 不影响这个位置。我能找到的唯一影响数字位置的属性是list-style-position，但只有值inside 和outside。

有没有办法改变这个数字的位置？

我尝试了各种不同的排列方式：

li.listnumber:before {
    text-align: left;
}

但这对自动生成的数字没有影响。

Answer 1

ol 具有默认 padding-left: 40px; 参见 Default CSS Values for HTML Elements

您可以通过以下方式轻松更改ol padding-left：

ol.listnumber{
   padding-left: 10px;
}

ol.listnumber {
    padding-left: 10px;
}
ol li {
    padding-left: 6.3mm;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}

<ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol>

Answer 2

我已经为此尝试了一种解决方案

我们有以下 ol 元素的默认 css 属性

  padding-inline-start: 40px;

我们可以像下面这样覆盖这个属性

 padding-inline-start: 10px;

下面是代码sn-p

ol {
  padding-inline-start: 10px;
}

li {
    padding-left: 10px;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}

<ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol> 

我希望它会有所帮助 谢谢...

Answer 3

如果将list-style-position设置为inside，可以通过ol的padding-left来定义红线。请参阅示例并将鼠标悬停在列表上以查看效果，我添加了一个边框以进行可视化。

ol {
  border: 1px solid black;
  padding-left: 0; /* or whatever*/
}

ol:hover {
  padding-left: 6mm;
}

ol li {
  list-style-position: inside;
}

ol li p {
  padding-left: 6.3mm;
  display: inline-block;
  margin: 0;
}

<ol class="listnumber">
  <li class="listnumber">
    <p class="listnumber">list number</p>
  </li>
</ol>

Answer 4

点击此链接，它解释了如何删除预定义的项目符号样式并创建具有所需样式的自己的项目符号：

https://www.w3schools.com/howto/howto_css_bullet_color.asp

ul {
    list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

希望对您有所帮助，谢谢。

Answer 5

给::marker 一个宽度并左对齐其内容：

li::marker {
  text-align: start;
  width: 6.3mm;
}