带括号的HTML编号

Question

请问如何以这种格式设置编号:

1) number 1
2) number 2
3) ...

在HTML？

我只找到了获得这种格式的方法:

1. number 1
2. number 2
3. ...

数字后没有括号.

此外,是否可以设置开始,编号类型,但没有其他格式.

Answer 1

您可以使用有序列表来实现此目的<ol>:

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

<ol>
    <li>some text</li>
    <li>some more text</li>
    <li>some further text</li>
</ol>

示例JSFiddle

引自:有序列表(HTML)低-α与右括号？

Answer 2

我知道这现在有点老了，但是这些解决方案都没有考虑到两位数或三位数甚至换行文本。

*, ::after, ::before {
    box-sizing: border-box;
}

ol {
    counter-reset: list;
}

ol > li {
    list-style: none;
    position: relative;
}

ol > li:before {
    content: counter(list) ")";
    counter-increment: list;
    left: -40px;
    padding-right: 10px;
    position: absolute;
    text-align: right;
    width: 40px;
}

<ol>
    <li>Line 1</li>
    <li>Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. Line 2 is long. </li>
    <li>Line 3 is not so long.</li>
    <li>Line 4</li>
    <li>Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. Line 5 is long. </li>
    <li>Line 6 is not so long.</li>
    <li>Line 7</li>
    <li>Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. Line 8 is long. </li>
    <li>Line 9 is not so long.</li>
    <li>Line 10</li>
    <li>Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. Line 11 is long. </li>
    <li>Line 12 is not so long.</li>
</ol>

Answer 3

<style>
ol {
columns:2;
}
ol > li::marker {
content:counter(list-item) ")\2003";
}
</style>

<ol>
<li>Hello</li>
<li>Darkness</li>
<li>My</li>
<li>Old</li>
<li>Friend</li>
<li>I<br>Have</li>
<li>Come</li>
<li>To</li>
<li>Talk</li>
<li>To</li>
<li>You</li>
<li>Again</li>
</ol>

结果：

Answer 4

使用有序列表：

例如

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol> 

更详细的解释可以在这里找到： http://www.w3schools.com/html/html_lists.asp

如果你对括号特别感兴趣，你可以在 css 中使用如下代码：

ol {list-style-type: none;}
li:before {content: counter(section, lower-alpha) ") ";}
li { counter-increment: section;}

但请注意，这在 IE7 或更低版本中可能无法完美运行。