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

这样的东西？使用position绝对的问题，就像你在扩展的元素一样。保持它们相对于其他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>

删除缩进多层有序列表

1 个答案: