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

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

css

Css 如何在有序列表中的数字和内容之间插入换行符,css,html-lists,Css,Html Lists,我需要制作具有高度定制的有序列表我需要做的一件事是在数字和内容之间划一条线目前，我知道的唯一方法是实际将换行符作为内容的第一部分，如下所示： <head> <style type="text/css"> ol { counter-reset: li; list-style:none; border: solid 1px #000; width: 500px; margin: 0 auto; } li { text-al

我需要制作具有高度定制的有序列表

我需要做的一件事是在数字和内容之间划一条线

目前，我知道的唯一方法是实际将换行符

作为内容的第一部分，如下所示：

<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>


ol{
计数器复位：li；
列表样式：无；
边框：实心1px#000；
宽度：500px；
保证金：0自动；
}
李{
文本对齐：居中；
左边距：-2.5em；
边缘底部：.5em；
颜色：#00F；
}
李：以前{
显示：内联块；
内容：柜台（李）；
反增量：李；
宽度：2米；
颜色：#F00；
}

第1行

oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

Lorem ipsum dolor sit amet，tristique lacus。在前庭的中间位置，我们可以看到一个自由的人，一个自由的人。在连续性的盲点上的乌尔纳，在卢克图斯的多洛·阿尔库·维西（dolor arcu wisi convallis pede），在妊娠期的胎儿，前庭的内脏。在我们的生活中，我们为我们的孩子、孩子和孩子们提供了便利，我们为他们提供了自由。精英阶层的领袖们，他们的领袖们，他们的领袖们，他们的领袖们。

第4行

第5行

第6行

第7行

第8行

第9行

oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

我想要一种插入（或模仿换行）的css方法，而不是将

放在每个

之前

我很乐意看到简单的js技巧来实现这一点，但我更愿意使用css而不是js。

演示：

只需使用

display:block

而不是

inline block

，然后删除

width:2em

：

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

非常感谢。那很快很容易。我最初尝试了

display:block

，但没有删除

宽度。这可能就是它不起作用的原因。@fredsbend Withwidth:2em
有换行符，但计数器编号不居中（好吧，它们居中，但不是相对于
元素）。看见