0

我有多层列表，我希望所有层都有相同的缩进，目前当我进入每一层时，每一层都会缩进更多。我希望他们都共享相同的缩进级别。我已经设法将 css 提高到它们都缩进的水平，但是我遇到的问题是，如果一行太长，它会越过下一行。拥有第二条线的能力似乎已经消失。看看这张图片的结果如何我如何处理代码，以便第二行正常运行并且不覆盖第一行？

ol,li {
    padding: 0;
    margin:0
    }

ol {
    list-style:none;
    counter-reset: item 
}

li:before {
    content: counters(item, ".") " "; 
    counter-increment: item ;
}

li span{
    position: absolute;
    left: 50px;
}

HTML 代码是：

    <ol>
        <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugit beeaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, </span>
            <ol>
                <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugit bsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, </span>
                </li>
                <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quperspiciatis inventore ipsa totam ipsam ipsam, </span>
                </li>
                <ol>
                    <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugit is ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam,</span>
                    </li>
                </ol>
            </ol>
        </li>

        <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugitrspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, </span>
        </li>
        <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae ve totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, </span>
        </li>
    </ol>
4

1 回答 1

0

像这样的东西？像你一样使用绝对位置的问题在于它在将扩展的元素上。保持它们相对于其他 dom 元素是很重要的。但是，列表编号很好，因为它们将保留在一行上，这将与第一行文本内联。

ol,li {
    padding: 0;
    margin:0    
}

ol {
    list-style:none;
    counter-reset: item 
}

li:before {
    content: counters(item, ".") " "; 
    counter-increment: item ;
    position:absolute;
}

li {
  position:relative;
}

li span{
    position: relative;
    left: 50px;
}
<ol>
        <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugit beeaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, </span>
            <ol>
                <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugit bsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, </span>
                </li>
                <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quperspiciatis inventore ipsa totam ipsam ipsam, </span>
                </li>
                <ol>
                    <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugit is ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam,</span>
                    </li>
                </ol>
            </ol>
        </li>

        <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugitrspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, </span>
        </li>
        <li><span> omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae ve totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, </span>
        </li>
    </ol>

于 2018-03-21T11:01:37.003 回答