如何制作嵌套lis级联的文本

Question

如何让background color在没有width:100%

的情况下传播到整个行

<ul>
    <li style="background-color:#33FF33">11
        <ul>
            <li style="background-color:#CC3333">22
                <ul>
                    <li style="background-color:#336633">33 </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

这就是我想要实现的目标

Answer 1

这可以通过使用text-indent来实现 警告：文本缩进不能很好地继承，因此您必须为每个级别的嵌套列表项添加不同的文本缩进。

＆＃13;

＆＃13;

ul, li {padding-left:0; margin-left:0; list-style: none}
li li {text-indent:2.5em}
li li li {text-indent:5em}
li li li li {text-indent:7.5em} /* and so on, how many levels you need */

＆＃13;

<ul>
    <li style="background-color:#33FF33">11
        <ul>
            <li style="background-color:#CC3333">22
                <ul>
                    <li style="background-color:#336633">33 </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用CSS text-indent属性在元素文本中进行缩进。但是，如果您不想使用它，可以使用jquery .wrap()将div包裹在li的文本周围，并为margin-left设置div

＆＃13;

＆＃13;

$("li").each(function(i){
    $(this).contents().eq(0).wrap("<div/>");
    $(this).find("div").css("margin-left", i * 40);  
});

＆＃13;

ul {
    padding: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li style="background-color:#33FF33">11
        <ul>
            <li style="background-color:#CC3333">22
                <ul>
                    <li style="background-color:#336633">33 </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;