Question

我需要制作具有高级别自定义的有序列表。

我需要的一件事就是在数字和内容之间加一个换行符。

目前，我知道如何执行此操作的唯一方法是实际将换行符<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。

Answer 1

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

只需使用display:block代替inline-block，然后移除width:2em：

li:before {
    display: block;
    content: counter(li);
    counter-increment: li;
    color:#F00;
}

如何在有序列表中的数字和内容之间插入换行符

1 个答案: