Question

我试图很好地展示代码段。经过prettyfy js处理后我的代码看起来像：

<pre>
    <ol>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ol>
</pre>

我希望在长线和颜色交替的情况下有一个水平的scrool酒吧：

pre {
  border: 1px #555555 solid;
  overflow-x: scroll;
}

ol {
  display: table;
}

li {
  display: table-row;
}

li:nth-child(even) {
  background-color: #DDD;
}

li:nth-child(odd) {
  background-color: #BBB;
}

是否仍然可以显示<OL>的数字？保持<li>宽度相等的任何其他解决方案？

https://jsfiddle.net/pk5ph40L/

感谢。

Answer 1

您可以使用CSS Counter

pre {
  border: 1px #555555 solid;
  overflow-x: scroll;
}
ol {
  display: table;
  padding: 0;
  margin: 0;
  counter-reset: tableCounter;
}
li {
  display: table-row;
}
li:before {
  counter-increment: tableCounter;              
  content: counter(tableCounter) ". ";
}
li:nth-child(even) {
  background-color: #DDD;
}
li:nth-child(odd) {
  background-color: #BBB;
}

<pre>
  <ol>
    <li>Cascading Style Sheets (CSS)</li>
    <li>is a style sheet language used for describing the presentation of a document written in a markup language.</li>
    <li>Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML</li>
    <li>the language can be applied</li>
    <li>to any XML</li>
  </ol>
</pre>

有没有办法在OL中显示数字，尽管＆＃34; display：table＆＃34;和＆＃34;显示：table-row＆＃34;？

1 个答案: