Question

是否可以使用html / css创建一个有序列表：

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

他们会像这样呈现（包括括号）：

(1) One
(2) Two

Answer 1

是的，你可以。请尝试以下代码。它可能无法在旧版本的IE或Firefox中使用。

更新：这是JSFiddle。

CSS：

ol {
  counter-reset: list;
}
ol li {
  list-style: none;
}
ol li:before {
  content: "(" counter(list) ") ";
  counter-increment: list;
}

HTML：

<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Answer 2

结帐css counters。这是a fiddle。

标记：

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

的CSS：

ol
{
    counter-reset: section; 
    list-style: none;
}
li:before
{
    counter-increment: section;
    content: "(" counter(section) ") ";    
}

Answer 3

请参阅以下JSFiddle：http://jsfiddle.net/VzEsr/

HTML

<ol>
  <li>One</li>
  <li>Two</li>
</ol>

CSS

ol {
    list-style: none;
    counter-reset: count 0;
}

ol li {
    counter-increment: count 1;
}

ol li:before {
    content: '(' counter(count) ')';
}

创建某种类型的css的有序列表

3 个答案: