跳過有序列表項編號
[英]Skip ordered list item numbering
問題描述
我有一個有序列表，我想跳過特定項目的數字輸出。
傳統輸出：
1. List item
2. List item
3. List item
4. List item
5. List item
期望的輸出：
1. List item
2. List item
Skipped list item
3. List item
4. List item
5. List item
這在CSS中是否可以實現？ 我發現了一個之前我不知道的<ol> “start”屬性 ，但似乎沒有幫助我。
5 個解決方案
解決方案1
26 2012-10-12 13:25:24
最簡單的方法是從要跳過的項中刪除列表標記，並使用value屬性設置下一個項的編號（在HTML5中不會棄用/廢棄）。 例：
<ol>
<li>List item
<li>List item
<li style="list-style-type: none">List item
<li value=3>List item
<li>List item
</ol>
解決方案2
18 已采納 2012-10-12 11:38:46
另一種選擇是使用CSS3計數器： demo
HTML
<ul>
<li>One</li>
<li>Two</li>
<li class="skip">Skip</li>
<li>Three</li>
<li>Four</li>
</ul>
CSS
ul {
counter-reset:yourCounter;
}
ul li:not(.skip) {
counter-increment:yourCounter;
list-style:none;
}
ul li:not(.skip):before {
content:counter(yourCounter) ".";
}
ul li.skip:before {
content:"\a0\a0\a0"; /* some white-space... optional */
}
解決方案3
3 2016-10-21 10:15:46
現在很簡單。
只需將以下內容添加到.skip類中，並將.skip用於跳過的列表項：
ol li.skip {
list-style-type:none;
counter-increment:none;
}
在HTML中它將是：
<ol>
<li>first list item</li>
<li class="skip">2nd list item</li>
<li>third list item</li>
</ol>
導致：
- 第一個清單項目
第二個清單項目 - 第三個清單項目
解決方案4
1 2014-10-16 15:42:00
這是我的解決方案（僅限CSS），允許您從ol（有序列表）保持li（列表項）的正常使用。 這意味着所有li項目都是有意義的，並且沒有項目與其鄰居不代表相同的內容。
代碼如下：
.term-and-condition li { position: relative; } .term-and-condition ol ol { list-style-type: lower-latin; } .term-and-condition h2 { position: absolute; top: -2.4em; left: -1.5em; } .term-and-condition h3 { position: absolute; top: -2.4em; left: -1.5em; } .term-and-condition h2 + *, .term-and-condition h3 + * { margin-top: 4em; }
<html lang="en"> <head> <meta charset="UTF-8"> <title>Skip ordered list item numbering</title> </head> <body> <article class="term-and-condition"> <h1>Participants agree to be bound by these Terms and Conditions</h1> <ol> <li> <h2>The Promoter</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li> <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li> <li> <h2>Eligibility</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li> <li> <h2>Entry</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li> <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p></li> <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis dolorum consequuntur, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere, accusantium sed, adipisci aliquam unde! Sit, iure.</p> </li> <li> <p>Entrants must upload an image and text that:</p> <ol> <li><p>Lorem ipsum dolor sit amet, qui cupiditate fugit quo ipsa hic, in amet libero magnam consectetur facere</p></li> <li><p>consectetur adipisicing elit. Veritatis dolorum consequuntur,</p></li> <li><p>in amet libero magnam consectetur facere,</p></li> <li><p>accusantium sed, adipisci aliquam unde! Sit, iure.</p></li> <li> <h3>Additional requirements</h3> <p>All entries must be the participant's own image or have the relevant permission</p> </li> <li><p>The entrant must be the lorem</p></li> </ol> </li> <li> <h2>Winner Selection</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit tenetur minus dolores! Natus harum pariatur voluptas, voluptatibus magnam, animi explicabo eos laudantium delectus nobis repellat dicta eveniet, et blanditiis ducimus!</p> </li> </ol> </article> </body> </html>
解決方案5
0 2018-07-09 14:52:30
我嘗試過的一件事似乎只是添加了一個font-size：0。這可以應用於前面提到的“skip”類。
不可否認，這個解決方案缺乏一些HTML純度，但非常簡單。
jquery - 在拖動有序列表項時，后續項的編號總是增加1
[英]jquery - while dragging an ordered list item, numbering of subsequent items always increases by 1
TinyMce 嵌套有序列表十進制編號，具有不同的編號樣式
[英]TinyMce nested ordered list decimal numbering with different numbering styles
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.