CSS guión conjunto li

Question

buscar en Google y la búsqueda de desbordamiento de pila no arrojó ningún resultado que podía reconocer, por lo que me perdone si esto se ha hecho antes ...

Tengo menú desplegable principal que utiliza como base las listas . El problema es que las listas son muy amplias y no se ensanchan lo suficiente cuando se expanden. Entonces, este es mi problema! ¿Cómo hago que la cantidad de sangría en listas sea más grande a través de CSS?

Answer 1

para sangrar un menú desplegable ul, utilice

/* Main Level */ 
ul{ 
    margin-left:10px; 
} 

/* Second Level */ 
ul ul{ 
    margin-left:15px; 
} 

/* Third Level */ 
ul ul ul{ 
    margin-left:20px; 
} 

/* and so on... */ 

Puede sangrar los li s y (si procede) los a s (o lo que elementos de contenido que tiene), así, cada uno con diferentes efectos. También podría usar padding-left en lugar de margin-left, nuevamente según el efecto que desee.

actualización

Por defecto, muchos navegadores utilizan padding-left para establecer la sangría inicial. Si desea deshacerse de eso, establecer padding-left: 0px;

Aún así, ambas margin-left y padding-left ajustes afectan la sangría de las listas de diferentes maneras. Específicamente:margin-left afecta la indentación en el exterior del borde del elemento, mientras que padding-left afecta el espacio en el interior del borde del elemento. (Learn more about the CSS box model here)

La configuración padding-left: 0; deja los iconos de viñeta del li colgando sobre el borde del borde del elemento (al menos en Chrome), que puede ser o no lo que usted desea.

Ejemplos de padding-left vs margin-left y cómo pueden trabajar juntos en la UL: https://jsfiddle.net/daCrosby/bb7kj8cr/1/

Answer 2

li{ 
    margin-left:50px; 
} 

o sustituya 50px con lo que desee.

Answer 3

Proveedores:

ul { 
    list-style-position: inside; 
} 

Answer 4

padding-left es lo que controla la sangría de ul no margin-left.

Comparar: Aquí está la configuración padding-left a 0px, observe que toda la indentación desaparece.

ul { 
 
    padding-left: 0px; 
 
}

<ul> 
 
    <li>section a 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li>section b 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul>

y aquí está el establecimiento de margin-left a 0px. Observe que la sangría NO cambia.

ul { 
 
    margin-left: 0px; 
 
}

<ul> 
 
    <li>section a 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<ul> 
 
    <li>section b 
 
    <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 5

me encontré con que lo hace en dos pasos relativamente sencillos parecía funcionar bastante bien. La primera definición de css para ul establece la sangría base que desea para la lista como un todo.La segunda definición establece el valor de sangría para cada elemento de lista anidado dentro de él. En mi caso, son lo mismo, pero obviamente puedes elegir lo que quieras.

ul { 
    margin-left: 1.5em; 
} 

ul > ul { 
    margin-left: 1.5em; 
}