html - 动态右对齐自定义 OL 标记

Question

有没有一种方法可以让我在不硬编码提到的 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 位数字的数字来说效果很好，但超过这个数字我必须手动增加每个额外数字的宽度。理想情况下，我可以拥有根据最大元素编号确定尺寸的东西。

Answer 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;
 }