时间戳

首页 > 解决方案 > 动态右对齐自定义 OL 标记

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

问题描述

有没有一种方法可以在不对注释进行硬编码的情况下获得等价物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 位的数字，但除此之外，我必须手动增加每个额外数字的宽度。理想情况下，我可以根据最大的项目编号拥有一些尺寸。

标签： htmlcss

解决方案

用这个替换你的风格：

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

推荐阅读