Question

我有编号LI项目的OL列表。我想在每个单独的LI元素周围放置一个左边框。但是，我只能将边框放在子弹编号的右边，我想把它放在左边。

我想将div包装器保留在LI元素周围。

<ol>
    <div class = "li_wrapper">
        <li>I am a line</li>
    </div>
    <div class = "li_wrapper">
        <li>I am a line</li>
    </div> 
</ol>

样式：

.li_wrapper{
    font-size:20px;
    margin-top:10px;
}

li{
    border-left:red 2px solid;
}

Answer 1

只需使用：

Demo Fiddle

list-style-position: inside;

list-style-position CSS属性指定了该位置主要区块框中的标记框。

Answer 2

Hay你可以这样做：只需更改padding-left，如果您希望红线更左侧。

.li_wrapper{
    font-size:20px;
    margin-top:10px;
}

li{
    border-left:red 2px solid;
    list-style-type: none;
    padding-left: 10px

}

Answer 3

您还需要将list-style设置为小数。那就是你需要的。

li  {
  border-left:red 2px solid;
  list-style: decimal inside;     /*append this line*/
}

JSFIDDLE

Answer 4

您可以通过删除正常数字并添加伪类来实现此目的。

ol {
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* No default numbers */
    *list-style: decimal; /* Fallback for IE6/7 */
}

然后在li中的元素之前添加一个数字（例如将其包装在span中：

.li span:before{
    content: counter(li);
    counter-increment: li;
    /* Add your styles like border-left */
}

Roger Johansson wrote about that了解更多信息！

Answer 5

添加内容，例如

＆＃13;

#one li::before{content:" ";border-left:2px solid red;}

＆＃13;

<ol id="one">

        <li> I am a line</li>
    
        <li> I am a line</li>
    
</ol>

＆＃13;

在项目符号编号之外添加左边框以列出项目

5 个答案:

Demo Fiddle