动态右对齐自定义OL标记[重复]答案

【问题标题】：Right align custom OL markers dynamically [duplicate]动态右对齐自定义OL标记[重复]
【发布时间】：2020-03-12 20:33:33
【问题描述】：

有没有一种方法可以在不对注明的margin-left 进行硬编码的情况下获得等价物？

ol.a {
	list-style-type: none;
	counter-reset: item;
	display: inline-block;
	margin: 0;
	padding: 5px;
	border: 1px solid black;  
}
ol.a li {
	counter-increment: item;
	margin-left: 40px; /* How can I avoid this being hard-coded? */
}
ol.a li::before {
	content: '#' counter(item) ':';
	position: absolute;
	margin-left: -1000px; /* These are hard too, but they can be ridiculously large with no problem (as long as I don't want to apply a background I suppose..) */
	width: 995px;
	display: block;
	text-align: right;
}

<ol class="a">
	<li>Example</li>
	<li>Example</li>
	<li style="counter-reset: item 9">Example</li>
	<li>Example</li>
	<li style="counter-reset: item 99">Example</li>
	<li>Example</li>
</ol>

这适用于最多 3 位的数字，但除此之外，我必须手动增加每个额外数字的宽度。理想情况下，我可以根据最大的项目编号拥有尺寸。

【问题讨论】：

检查已接受答案的第二个 sn-p
我希望我的问题措辞更好，我可能会先找到那个帖子。

标签： html css

【解决方案1】：

用这个替换你的风格：

  ol.a {
     list-style-type: none;
     counter-reset: item;
     margin: 0;
     padding: 5px;
     display: table;
     table-layout: fixed;
     border: 1px solid black;
 }
 ol.a li {
     counter-increment: item;
     display: table-row;
 }
 ol.a li::before {
     content: '#'counter(item) ':';
     text-align: right;
     display: table-cell;
     padding: 0 10px;
 }

【讨论】：