2

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

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

4

5 回答 5

3

ol具有默认值，padding-left: 40px;请参见HTML 元素的默认 CSS 值

您可以轻松更改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>

于 2019-10-10T08:27:17.567 回答
1

如果将 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>

于 2019-10-10T08:26:27.043 回答
1

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

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) */
}

希望这会有所帮助，谢谢。

于 2019-10-10T08:28:25.603 回答
1

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

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

  padding-inline-start: 40px;

我们可以覆盖这个属性，如下所示

 padding-inline-start: 10px;

下面是代码片段

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>

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

于 2019-10-10T08:36:23.173 回答
1

给::markera 宽度并左对齐其内容：

li::marker {
  text-align: start;
  width: 6.3mm;
}
于 2019-10-10T09:42:20.957 回答