ancho completo: ¿fondo de desplazamiento para listas anidadas?

Question

El html recortado a continuación muestra una lista anidada de elementos. Al pasar el mouse sobre el mouse, el color de fondo de los elementos cambia. Pero un espacio queda sin color a la izquierda (debido a la sangría).

¿Cómo conseguiría que ese espacio se coloreara también?

Intenté agregar absolute elementos posicionados a los elementos li con left:0. Pero aquellos ocultar parcialmente el contenido de los li elementos:/

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

Añadir el relleno de los divs en lugar de la <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} 

Demostración: http://jsfiddle.net/Madmartigan/MKK8v/

Al configurarlo en el elemento de la lista, terminas rellenando todo los elementos de la lista de niños también. Si puede modificar su marcado, creo que hay formas mejores.

Answer 2

Creo que la manera más simple aquí sería poner el fondo de relleno y desplazamiento sobre sus elementos div. Coloca un límite duro desagradable en los niveles de anidación de tu árbol, ya que tienes que escribir tantas reglas de CSS como niveles tienes, pero ... de todos modos existe un límite horizontal para el ancho de tu contenido.

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

Se puede lograr utilizando jQuery.

he utilizado un div invisible que se posiciona en el li siendo mantenido y se llena todo el ancho

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

sería mejor con CSS, pero utilizando jQuery usted podría:

Agregue relleno al div según el nivel.

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

https://jsfiddle.net/9ydr6b6z/

Answer 5

Hay problema se produce, porque ha solicitado padding-left: 20px;, de modo que la libración no se aplica a la parte que contiene 20px padding de izquierda a derecha.

Como mi sugerencia, Para la estructura html css adecuada &, tiene que asignar clase o Identificación nombre a <li> & <div> elemento, debido a que se puede detectar fácilmente un problema & obtener poderosa estructura.

Answer 6

Puede eliminar padding-left del elemento li y el uso de jQuery para agregar padding-left a DIV así:

$("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

podría utilizar este CSS para hacer de sus div llenan los guiones para que el espacio no quede sin color en el: efecto de desplazamiento, luego configure el desbordamiento en oculto en el contenedor principal.

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

De esta manera es genérico para que pueda tener tantos sub <ul> y <li> etiquetas como sea necesario. Aquí hay un enlace a JSFiddle con un ejemplo de trabajo.

Answer 8

Utilice este código CSS en lugar de su código.

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

Intento de encontrar una solución genérica Probé con CSS Counters. Desafortunadamente, parece que los contadores solo se pueden usar en las propiedades content.

Tal vez alguien puede encontrar la manera de utilizar el contador para obtener el correspondiente 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>