2

我需要制作具有高水平定制的有序列表。

我需要做的一件事是在数字和内容之间换行。

目前，我知道如何做到这一点的唯一方法是将换行符<br>作为内容的第一部分，如下所示：

<head>
<style type="text/css">
ol {
    counter-reset: li;
    list-style:none;
    border: solid 1px #000;
    width: 500px;
    margin: 0 auto;

}
li {
    text-align:center;
    margin-left: -2.5em;
    margin-bottom:.5em;
    color:#00F;
}
li:before {
    display: inline-block;
    content: counter(li);
    counter-increment: li;
    width: 2em;
    color:#F00;
}
</style>
</head>

<body>

<ol>
<li><br>Line 1
<li><br>ooooooooooooooooooooo|ooooooooooooooooooooo
<li><br>Lorem ipsum dolor sit amet, tristique lacus. Rhoncus wisi interdum massa imperdiet neque vestibulum, eget pretium vel, id consectetuer lacus mi, tempus mi, a libero libero. Urna at lacus lectus quis consectetuer, dolor arcu wisi convallis pede in luctus, nisl phasellus vivamus gravida, ultricies vestibulum. Facilisi erat fusce eget aut sed pede, vel ac posuere, et molestie, in morbi vivamus nisl pellentesque pellentesque wisi, ut nunc massa libero id rhoncus nascetur. Purus elit, nulla imperdiet sagittis scelerisque odio, neque sodales sollicitudin nec aliquam ut.
<li><br>Line 4
<li><br>Line 5
<li><br>Line 6
<li><br>Line 7
<li><br>Line 8
<li><br>Line 9
<li><br>ooooooooooooooooooooo|ooooooooooooooooooooo
</ol>

</body>

我想要一种插入（或模仿换行符）的css方法，而不是<br>在每个<li>.

我很高兴看到简单的 js 技巧来做到这一点，但我宁愿在 js 上使用 css。

4

1 回答 1

2

演示：http: //jsfiddle.net/wXC58/

只需使用display:block而不是inline-block，并删除width:2em：

li:before {
    display: block;
    content: counter(li);
    counter-increment: li;
    color:#F00;
}
于 2013-08-10T20:56:21.623 回答