与数字+字母

HTML复杂的列表项如何做到这一点：与数字+字母

1. lorem ipsum 
    2. lorem ipsum 
2a. lorem ipsum 
    3. lorem ipsum 
4a. lorem ipsum

HTML：（我不能暴露文本所以我用LOREM）

<ol> 
    <li>lorem ipsum 1</li> <--- 1 
    <li>lorem ipsum 2 </li> <--- 2 
    <li class="number-alpha">lorem ipsum 2a</li> <--- 2a 
    <li>lorem ipsum 3</li> <--- 3 
    <li class="number-alpha">lorem ipsum 4a</li> <--- 2a 
    </ol>

正如你所看到的2a与4a不同，但我需要在一个有序列表中解决这两种情况，并使用CSS代替JS或Jquery。你有2和2a的原因是因为2a是不同用户的特殊消息2。它的4a而不是3a的原因是因为4a不是一个特殊的信息，但它的信息为不同的用户（它需要显示在同一个列表中）

来源

2016-07-08 SirJord

跟单'ul'无子菜单，你不能用CSS管理这个（或者使用CSS计数器或其他）。你需要手动编码。什么是实际的HTML？再加上4发生了什么？ –

Paulie_D，这是我第二次看到你评论“你不能那样做”，请不要这次关闭这个话题，看看我的答案。 –

这就是我所带的（非常自豪的一个我得承认）：

ul { 
 
    counter-reset:yourCounter; 
 
} 
 
ul li { 
 
    list-style:none; 
 
} 
 
ul li:not(.sub) { 
 
    counter-increment:yourCounter; 
 
} 
 
ul li:before { 
 
    content:counter(yourCounter) ". "; 
 
} 
 
ul li.sub:before, ul li.subskip:before { 
 
    content:counter(yourCounter) "a. "; 
 
}

<ul> 
 
    <li>lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li class="sub">lorem ipsum</li> 
 
    <li>lorem ipsum</li> 
 
    <li class="subskip">lorem ipsum</li> 
 
</ul>

来源

2016-07-08 12:10:30

谢谢！这非常有用。我现在需要添加我自己的填充以确保文本像普通List一样（当文本分成两行时）。干杯! – SirJord

不用担心:)你可以做例如left：0px;位置：绝对;在伪元素和左：15px;在李元素:)只要确保把位置：亲戚;到ul标签，所以它没有把自己相对于页面 –

好吧谢谢你的信息！将尝试它，只要我把它实现到我的IOS WebView :) – SirJord

回答

相关问题