如何微调列表的位置 bullet/number
How to finetune the position of a list bullet/number
我在 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 毫米宽 space 的中心,我想将它对齐到那个 space 的左侧(将数字移到红线指示的位置)。
text-indent 和 margin-left 不影响这个位置。我能找到的唯一影响数字位置的 属性 是 list-style-position
,但它只有值 inside
和 outside
。
有没有办法改变这个号码的位置?
我试过各种排列组合:
li.listnumber:before {
text-align: left;
}
但这对自动生成的号码没有影响。
如果将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>
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>
按照这个 link,它解释了如何删除预定义的项目符号样式并创建具有所需样式的自己的项目符号:
https://www.w3schools.com/howto/howto_css_bullet_color.asp
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "22"; /* Add content: 22 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) */
}
希望对您有所帮助,谢谢。
我已经尝试过一种解决方案
对于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>
希望对你有所帮助
谢谢...
给 ::marker
宽度并左对齐其内容:
li::marker {
text-align: start;
width: 6.3mm;
}
我在 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 毫米宽 space 的中心,我想将它对齐到那个 space 的左侧(将数字移到红线指示的位置)。
text-indent 和 margin-left 不影响这个位置。我能找到的唯一影响数字位置的 属性 是 list-style-position
,但它只有值 inside
和 outside
。
有没有办法改变这个号码的位置?
我试过各种排列组合:
li.listnumber:before {
text-align: left;
}
但这对自动生成的号码没有影响。
如果将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>
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>
按照这个 link,它解释了如何删除预定义的项目符号样式并创建具有所需样式的自己的项目符号:
https://www.w3schools.com/howto/howto_css_bullet_color.asp
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "22"; /* Add content: 22 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) */
}
希望对您有所帮助,谢谢。
我已经尝试过一种解决方案
对于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>
希望对你有所帮助 谢谢...
给 ::marker
宽度并左对齐其内容:
li::marker {
text-align: start;
width: 6.3mm;
}