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>

我尝试了很多谷歌搜索结果，但没有创建我所追求的布局，我最接近的是以下，它确实嵌套了项目但是从下一行的开头而不是从最后一行开始

.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

轻推文本

就>而言，使用它很重要，如果你想要解释，你可以参考我的另一个答案here。

使用箭头，您可以使用: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: "";
}

Answer 2

感谢Alien先生，我完全成功完成了这项工作。

http://jsfiddle.net/4zzQ8/

   <span>Module » Parent » Wraper
<span class="breadCrumbitem">

        <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
   </ul>

span.breadCrumbitem  {
list-style-type: none;
display: inline-block;
vertical-align: top;
margin-right: 30px;
position: relative;
top: -13px;
}    
span.breadCrumbitem > ul   {
list-style-type: none;
text-indent: -30px;
}

span.breadCrumbitem > ul > li:before   {
content: " » ";
}

嵌套跨越一系列步骤，如楼梯

2 个答案: