嵌套跨越像楼梯一样的一系列步骤

Question

我正在尝试创建以下布局

Stuff » More Stuff » Children » FirstChild  
                                  » SecondChild  
                                      » ThirdChild

由于使用了CRM系统，我有一些限制，所以呈现的html如下：

<span>Stuff » More Stuff » Children <span class="breadcrumbItem">» FirstChild</span>
                                    <span class="breadcrumbItem" style="margin-left:10px">» SecondChild</span></span>
                                        <span class="breadcrumbItem" style="margin-left:20px">» ThirdChild</span>
                                                </span>

我已经尝试了许多 googled css 结果，但是没有一个创建我所追求的布局，我最接近的是以下内容，它确实嵌套了项目，但从下一行的开头而不是从最后一行的末尾开始。

.breadcrumbItem {
    padding: 5px 6px 5px 2px;
    font-size: 12px;
    line-height: 6px;
    display:table;

}

有可能做我正在尝试的事情吗？

Answer 1

你应该在这里使用ul和li元素与text-indent属性

Demo

div > ul > li {
    list-style-type: none;
    display: inline-block;
    vertical-align: top;
    margin-right: 30px;
}

div > ul > li > ul {
    list-style-type: none;
}

div > ul > li > ul > li:nth-of-type(2) {
    text-indent: 20px;
}

div > ul > li > ul > li:nth-of-type(3) {
    text-indent: 40px;
}

在这里，我使用了从头开始制作的嵌套ul和li元素，为了您正在寻找的效果，我使用了nth-类型，这样您就不必修改 DOM，并使用微调文本text-indent

就目前>而言，使用它很重要，如果您需要解释，可以在此处参考我的其他答案。

用箭头，你可以用:before和:after伪元素，如...

Demo 2

/* For arrows */

div > ul > li:after {
    content: "»";
    position: relative;
    right: -20px;
}

div > ul > li > ul > li:before {
    content: "»";
    left: -5px;
    position: relative;
}

div > ul > li:last-child:after {
    content: "";
}