Question

如何显示自定义排序列表？是否有可能低于输出

巡回赛1：你好

巡回赛2：怎么了？

巡回赛3：再见

巡回赛4：测试之旅

Answer 1

您可以使用CSS counters和content将单词添加到增量前面。 Demo

<强> HTML

<ol>
    <li>Hello</li>
    <li>Whats Up</li>
    <li>Bye</li>
    <li>How Are You</li>
</ol>

<强> CSS

ol {
  counter-reset: tour;
}

li:before {
  counter-increment: tour;
  content: "Tour " counter(tour) ": ";  
}

<强>输出

巡回赛1：你好

巡回赛2：怎么了？

巡回赛3：再见

巡回赛4：测试之旅

<强>解释

使用counter-reset将<ol>计数器设置为您的计数器tour
每<li>增加tour counter-increment
将伪元素content的{{1}}设置为:before

Answer 2

您可以使用伪元素来执行此操作，但我不确定冒号是否正确：

<ol class="tour">
    <li>First thing's first</li>
    <li>Second's the best</li>
    <li>Why not third?, Because I though it was the best.</li>
    <li>How about fourth?</li>
</ol>

CSS（边距需要根据自己的喜好进行调整 - 尽管你可能会使用定位来实现同样的目标）：

ol.tour li:before {
    content:"Tour";
    margin-left:-60px; 
    margin-right:30px;
}
ol.tour{
    margin-left:40px;
}

示例小提琴：http://jsfiddle.net/n4s8fo2q/

自定义有序列表增量

2 个答案: