html - none - CSS set li indent

list style margin css

Question

Buscar en Google y buscar el desbordamiento de pila no arrojó ningún resultado que pudiera reconocer, así que perdóname si se me ha preguntado esto antes ...

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

Answer 1

Encontré que hacerlo en dos pasos relativamente simples parecía funcionar bastante bien. La primera definición de css para ul establece la sangría base que desea para la lista en su conjunto. La segunda definición establece el valor de sangría para cada elemento de lista anidada dentro de él. En mi caso son iguales, pero obviamente puedes elegir lo que quieras.

ul {
    margin-left: 1.5em;
}

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

Answer 2

Intenta también:

ul {
  list-style-position: inside;
}

Answer 3

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

Comparar: Aquí está configurando el padding-left a 0px , observe que desaparece toda la sangría.

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á configurando el margin-left a 0px . Note 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 4

Para sangrar un menú desplegable, use

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

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

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

/* and so on... */

También puede sangrar los li s y (si corresponde) los a s (o cualquier elemento de contenido que tenga), cada uno con efectos diferentes. También puede usar el padding-left lugar del margin-left , nuevamente, dependiendo del efecto que desee.

Actualizar

Por defecto, muchos navegadores usan el padding-left para establecer la sangría inicial. Si quieres deshacerte de eso, establece padding-left: 0px;

Sin embargo, tanto la configuración de margin-left como de padding-left afectan la sangría de las listas de diferentes maneras. Específicamente: el margin-left impacta la sangría en el exterior del borde del elemento, mientras que el padding-left afecta el espacio en el interior del borde del elemento. (Aprende más sobre el modelo de caja CSS aquí)

Ajuste de padding-left: 0; deja los iconos de bala del li colgando sobre el borde del borde del elemento (al menos en Chrome), que puede o no ser lo que quieres.

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

Answer 5

li{
    margin-left:50px;
}

O reemplaza 50px con lo que quieras.