删除缩进多层有序列表

Question

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

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>

Answer 1

这样的？ 像您一样使用绝对位置的问题在于它在将扩展的元素上。保持它们相对于其他 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>