Как сделать текст вложенной лилией каскадом

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

Вы можете использовать CSS text-indent свойство, чтобы сделать отступ в элемент текста. Но если вы не хотите его использовать, вы можете использовать jquery .wrap() для обертывания div вокруг текста li и установить margin-left для div.

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

ul { 
 
    padding: 0px; 
 
}

<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>

Answer 2

Этого можно достичь, используя text-indent.
Предостережение: текстовые отступы не наследуются красиво, поэтому вам придется добавлять разные текстовые отступы для каждого уровня вложенных элементов списка.

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 */

<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>