问题描述
我想超越例如How can you customize the numbers in an ordered list?,并使用可能复杂的HTML代码段在有序列表中创建自己的标签。例如:
ol { padding-left: 10em }
li.item-cus-name {
list-style-type: none
}
span.item-name {
display: inline-block;
position: absolute; left: -19.8em;
width: 30em;
text-align: right;
}
<ol>
<li>First item in an ordered list</li>
<li>Second item</li>
<li class="item-cus-name"><span class="item-name">Label <em>ehags</em></span>Third</li>
<li class="item-cus-name"><span class="item-name">c.</span>Fourth</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
</ol>
我想做的是让<span>
元素代表常规标签,标签文本向左扩展(当常规编号达到两位数时会发生这种情况)。这个解决方案非常脆弱:
肯定有更好的方法吗?
解决方法
如果您不希望自动换行,可以使用white-space:nowrap
...,并且放置“标签”绝对需要将li
放置在relative
处。
如果我们总是告诉标签为100%right
,则标签与li
之间的间距仅是标准边距的问题。
ol {
padding-left: 10em
}
li {
position: relative;
}
li.item-cus-name {
list-style-type: none
}
span.item-name {
position: absolute;
right: 100%;
white-space: nowrap;
margin-right: .4em; /* adjust to your requirements */
}
<ol>
<li>First item in an ordered list</li>
<li>Second item</li>
<li class="item-cus-name"><span class="item-name">Label <em>ehags.</em></span>Third</li>
<li class="item-cus-name"><span class="item-name">c.</span>Fourth</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li>More</li>
</ol>