與數字+字母

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

回答

相關問題