pełna szerokość: najedź tło dla list zagnieżdżonych?

Question

W poniższym html renderowana jest zagnieżdżona lista elementów. Po najechaniu kursorem myszy na kolor elementów zmienia się. Ale po lewej stronie pozostaje puste miejsce (ze względu na wcięcie).

W jaki sposób mogę również zabarwić tę przestrzeń?

Próbowałem dodać absolute pozycjonowanych elementów do elementów li za pomocą left:0. Ale ci, częściowo ukryć treść li elementów:/

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin:0 
 
} 
 
li { 
 
    margin:0; 
 
    padding: 0; 
 
    padding-left: 20px; 
 
} 
 
li > div:hover { 
 
    background-color: #eee 
 
}

<div style="position:relative"> 
 
    <ul> 
 
    <li><div>Root</div> 
 
     <ul> 
 
     <li><div>A</div> 
 
      <ul> 
 
      <li><div>AA</div></li> 
 
      <li><div>AB</div></li> 
 
      </ul> 
 
     </li> 
 
     <li><div>B</div> 
 
      <ul> 
 
      <li><div>BA</div></li> 
 
      <li><div>BB</div></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

dodać dopełnienie do div zamiast <li>:

ul { list-style: none; padding: 0; margin:0 } 
li { margin:0; padding: 0;} 
li > div:hover { background-color: #eee} 
li div{padding-left:20px} 
li li div{padding-left:40px} 
li li li div{padding-left:60px} 

Demo: http://jsfiddle.net/Madmartigan/MKK8v/

Ustawiając element na liście, kończysz dopełnianie wszystkich również elementy listy podrzędnej. Jeśli możesz zmienić swój znacznik, myślę, że są jednak lepsze sposoby.

Answer 2

Myślę, że najprostszym sposobem byłoby umieszczenie tła wypełnienia i kursora na elementach div. Wprowadza nieprzyjemny, twardy limit poziomów zagnieżdżania się drzew, ponieważ musisz napisać tyle reguł CSS, ile masz poziomów, ale ... prawdopodobnie istnieje horyzontalny limit dla twojej szerokości treści.

ul, li 
{ 
    margin: 0; 
    padding: 0; 
} 

ul div:hover { 
    background: #eee; 
} 

ul ul div { padding-left: 20px; } 
ul ul ul div { padding-left: 40px; } 
ul ul ul ul div { padding-left: 60px; } 
/* et cetera*/ 

Answer 3

Można to osiągnąć za pomocą jQuery.

Użyłem niewidoczny div, która pozycjonuje się na li czym zatrzymuje się i wypełnia całą szerokość

$(document).ready(function() { 
 

 
    $('li > div').hover(function(event) { 
 

 
     $("div#liSelect").show(); 
 
     $("div#liSelect").css('height', $(this).height() + "px"); 
 
     $("div#liSelect").css('top', $(this).position().top + "px"); 
 
     event.stopPropagation(); 
 
    }, 
 
    function() { 
 
     $('div#liSelect').hide(); 
 
    }); 
 
})

body { 
 
    margin: 0px; 
 
} 
 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
li { 
 
    margin: 0; 
 
    padding: 0; 
 
    padding-left: 20px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div style="position: relative"> 
 
    <div id='liSelect' style='display:none;width:100%;height:100%;position:absolute;left:0px;opacity:0.3;background-color:#555;pointer-events:none;'></div> 
 
    <ul> 
 
    <li> 
 
     <div>Root</div> 
 
     <ul> 
 
     <li> 
 
      <div>A</div> 
 
      <ul> 
 
      <li> 
 
       <div>AA</div> 
 
      </li> 
 
      <li> 
 
       <div>AB</div> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <div>B</div> 
 
      <ul> 
 
      <li> 
 
       <div>BA</div> 
 
      </li> 
 
      <li> 
 
       <div>BB</div> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 4

byłby ładniejszy z CSS, ale przy użyciu jQuery możesz:

Dodaj wypełnienie do div w zależności od poziomu.

$('li').each((i, el) => { 
    $(el).children('div').css('padding-left', 30 * $(el).parents('ul').length) 
}); 

https://jsfiddle.net/9ydr6b6z/

Answer 5

Nie

problem występuje, ponieważ zostały zastosowane padding-left: 20px;, tak że nie będzie Hover stosowana do tej części, która zawiera 20px padding od lewej.

W mojej sugestii, do prawidłowego struktura html & css, trzeba przypisać klasa lub Numer ID nazwę <li> & <div> elementu, dzięki temu można łatwo wykryć błąd & dostać potężną strukturę.

Answer 6

Można usunąć padding-lewo od elementu li i użyć jQuery aby dodać padding-left do div tak:

$("li>div").each(function(i, div){ 
       var $li = $(div).parent(); 
       var parentCount= $li.parents("li").length; 
       var padding = parentCount*20; 
       $(div).css("paddingLeft", padding + "px"); 
      }); 

Demo

Answer 7

Można użyć tego CSS, aby Twoje div wypełnienia wcięcia aby przestrzeń nie pozostała bezbarwna na skutek: hover, a następnie ustaw przelew na ukryty na opakowaniu nadrzędnym.

li div{ 
    padding-left: 100%; 
    margin-left: -100%; 
} 

W ten sposób jest nazwą rodzajową, dzięki czemu można mieć tyle sub <ul> i <li> tagi, jak trzeba. Oto link do JSFiddle z działającym przykładem.

Answer 8

Proszę użyć tego kodu CSS zamiast swojego kodu.

ul { 
    list-style: none; 
    padding: 0; 
    margin:0 
} 

li > div:hover { 
    background-color: #eee 
} 

li div { 
    padding-left: 20px; 
} 

li li div { 
    padding-left: 40px; 
} 

li li li div { 
    padding-left: 60px; 
} 

Answer 9

Próba znalezienia ogólnego rozwiązania, które wypróbowałem pod numerem CSS Counters. Niestety wygląda na to, że liczniki mogą być używane tylko w obiektach content.

Może ktoś może dowiedzieć się, jak korzystać z licznika, aby uzyskać odpowiedni padding-left ...

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    counter-increment: level; 
 
} 
 

 
ul:after { 
 
    content: ""; 
 
    counter-increment: level -1; 
 
} 
 

 
li div:hover { 
 
    background-color: #ddd; 
 
} 
 

 
li div { 
 
    padding-left: calc(20px * counter(level)); 
 
} 
 

 
li div:before { /* Just for debugging purposes */ 
 
    color: #bbb; 
 
    content: counter(level)" "; 
 
}

<div style="position:relative"> 
 
    <ul> 
 
    <li><div>Root</div> 
 
     <ul> 
 
     <li><div>A</div> 
 
      <ul> 
 
      <li><div>AA</div></li> 
 
      <li><div>AB</div></li> 
 
      </ul> 
 
     </li> 
 
     <li><div>B</div> 
 
      <ul> 
 
      <li><div>BA</div></li> 
 
      <li><div>BB</div></li> 
 
      <li><div>BC</div> 
 
       <ul> 
 
       <li><div>BCA</div></li> 
 
       <li><div>BCB</div></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><div>C</div></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>