4

我想要一个使用上标的有序列表，所以在我的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 个标签，但实际上它可以是不同的标签。涵盖这些的最佳方法是什么？

4

3 回答 3

4

在调整了一些东西之后，我自己发现了它。如果有人对这里的代码感兴趣。感谢所有人为我指明正确的方向

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>

于 2013-03-02T22:14:44.900 回答
0

在这里找到了一个可能的解决方案：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;
}

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

于 2013-03-02T14:58:04.183 回答
-2 

.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>

于 2013-03-02T14:52:25.627 回答