删除缩进多层有序列表

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>

删除缩进多层有序列表

Remove indent multi tiered ordered list

css

list

indentation

multi-tier