Question

我想要一个有序的列表，使用上标，所以在我的html中这样的东西：

<ol class="sup_n">
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p><p>Item 3b</p></li>
</ol>

但显示为

^1）项目1
^2）项目2
^3）项目3a
项目3b

但是，现有解决方案仅显示它适用于仅包含文本的列表项。当有其他内容（跨度，div，p标签，图像其他列表并命名）时，结果并不完全正常。由于我的html包含列表'样式'的混合，（一些只有文本，各种标签的混合）我希望它足够灵活，可以处理li标签内的任何内容，就好像它是一个'普通'标签。我希望我有道理，说实话，我不是一个真正的css巫师。

这是我使用的代码（上面提到的结构构思，上标的添加样式）：

ol.sup_n {
    counter-reset: item;
    margin: 0;
    padding: 0;
    list-style:none;
}

.sup_n li {
    display: block;
    margin-left: 1em;
}

.sup_n li:before {
    content: counter(item) ")";
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;
    padding-right: 0.5em;
    margin-left: -3.5em;       
    vertical-align:super;
    font-size:xx-small;
}

<ol class="sup_n">
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p><p>Item 3b</p></li>
</ol>

但只有列表项中没有子元素才能正常工作。如何使它与li中的多个不同元素一起使用？该示例仅使用p标签，但实际上它可以是不同的标签。什么是最好的方法来涵盖这些？

Answer 1

在调整了一些东西后，同时找到了它。如果有人对这里的代码感兴趣。感谢所有人指出我正确的方向

ol.super {
        counter-reset: item;
        padding: 0;
    	list-style:none;
    }
    
    .super li:before{
    	content: counter(item) ")";
        counter-increment: item;
    	position: absolute;	
    	vertical-align:super;
    	font-size:xx-small;
    	left: 1em;
    }
    
    .super li{
    	position: relative;
    	display: block;
    	padding: .0em .0em .0em 1.5em;
    }

<ol class="super">
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
<li><p>Item 3</p><p>Item 3b</p></li>
</ol>

Answer 2

在此处找到了一个可能的解决方案：http://www.red-team-design.com/css3-ordered-list-styles

完成了这样的代码

.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
}

通过这个例子你应该能够做自己的风格

Answer 3

.super span{
    vertical-align:super;
}

<ol class="super">
<li>Item <span>1</span></li>
<li>Item <span>2</span></li>
<li>Item <span>3</span></li>
</ol>

超级列表项

3 个答案: