嗨~
我正在使用OL标签制作一个自定义代码块。我已经设置了计数，那么当数字为>=时，如何使列表编号向左而不是向右2位数？以下是一些图片：
当前CSS(字体"代码"在@font face中定义(
ol.code {
background: rgba(0, 0, 0, 0.76);
border-radius: calc(0.35rem / 2);
border-bottom-right-radius: 0px;
padding: 10px;
padding-left: 15px;
counter-reset: item;
list-style-type: none;
border-left-style: solid;
border-left-color: orange;
border-width: medium;
}
ol.code li {
display: block;
color: white;
font-family: Code;
font-size: 25px;
}
ol.code li:before {
content: counter(item) " ";
counter-increment: item;
color: #acacac;
}
我目前拥有的：
链路
我想要什么：
链路
谢谢！
您可以将右文本对齐、左填充和负文本缩进相结合来实现此效果。
你需要的确切数字取决于你的字体，所以你必须稍微考虑一下。在下面的例子中，文本缩进为左填充的一半似乎是一个神奇的公式。
一旦你找到了文本缩进的填充，你就可以根据你预期的列表项目数量来调整数字。例如，为了容纳下面的3位数，我使用了
padding-left: 3em;
text-indent: -1.5em;
但是，如果你只有两位数，你可以逃脱
padding-left: 2em;
text-indent: -1em;
ol.code {
background: rgba(0, 0, 0, 0.76);
border-radius: calc(0.35rem / 2);
border-bottom-right-radius: 0px;
padding: 10px;
/* padding-left: 15px; */
padding-left: 0; /* NEW */
counter-reset: item;
list-style-type: none;
border-left-style: solid;
border-left-color: orange;
border-width: medium;
}
ol.code li {
display: block;
color: white;
font-family: Code;
font-size: 25px;
}
ol.code li:before {
content: counter(item) " ";
counter-increment: item;
color: #acacac;
display: inline-block; /* NEW */
text-align: right; /* NEW */
padding-left: 3em; /* NEW */
text-indent: -1.5em; /* NEW */
margin-right: 0.5em; /* NEW */
}<ol class="code">
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ol>