Como eliminar espacio de la izquieda de un <li>?

[yopmail]

Hola, quería saber como eliminar el espacio que queda siempre al lado izquierda al hacer una lista con <ul><li> ?

Dejo un dibujo para aclararlo:



Al hacer un "margin-left" sobre los <li> también genera un margen sobre el primer li, y esto hace que no quede lineado todos los bloques... unica cosa que se me ocurre (y me parece unachapuza ) es...

Si por ejemplo los <li> tienen un margen-left de 20px, en el <ul> aplicar un padding-left de -20px... pero me imagino que ha de haber una forma menos chapuza...


Todo comentario recibira +1, Gracias

[KATHYU]

CSS puro, Bootstrap ??

Ya intento hacer una clase para el primer li y una segunda clase para los otros ?? donde la primera no tenga ni padding ni margin mientras que las otras si ??

Es en un menu horizontal ?? Siempre en los menus veo todo uniforme, porque no pone todo su codigo para verlo mejor y hacer pruebas

[yopmail]

Iniciado por KATHYU

CSS puro, Bootstrap ??

Ya intento hacer una clase para el primer li y una segunda clase para los otros ?? donde la primera no tenga ni padding ni margin mientras que las otras si ??

Es en un menu horizontal ?? Siempre en los menus veo todo uniforme, porque no pone todo su codigo para verlo mejor y hacer pruebas

Muchas Gracias por tu respuesta :)

Aun no tengo la web, por eso tuve que enseñar en la imagen, quiero crear una mena de blog en forma de galeria... y siempre que hago uno me surge el mismo problema.. que todo el contenido esta torcido

Ahora al montar la nueva web, quiero hacerlo de forma correcta.. y también lo que dices sobre poner margin:0; en los primeros <li> es un trabajo bastante manual, por que si siempre vas añadiendo nuevas columnas.. es poco practico..

Y era para ver si había algun atajo css para solucionar ese problema..

[yopmail]

Ir probando, lo pude soluciónar..

En vez de "margin-left" hay que poner "margin-right" de este modo no habrá ningun espacio en el lado izquierdo... luego en el "<ul>" hay que poner un "margin-right" pero en negatio... de este modo todo queda alineado, y no ningun espacio esta fuera de lugar.. puedes añadir todos los recuadros que quieras, que no se perdera nada..

Lo unico que hay que procurar de hacer, es que el valor del margen <li> coincida con el valor del margen negativo de <ul>

No se si es una solución correcta... pero es una solución para aquel que le sirva..

Gracias a todos por la ayuda

[KATHYU]

Iniciado por KATHYU

CSS puro, Bootstrap ??

Ya intento hacer una clase para el primer li y una segunda clase para los otros ?? donde la primera no tenga ni padding ni margin mientras que las otras si ??

Es en un menu horizontal ?? Siempre en los menus veo todo uniforme, porque no pone todo su codigo para verlo mejor y hacer pruebas

Sinceramente me perdi en tus respuestas

Pero con eso que decis que es poco practico, solo usas una clase en los <li> y si lo queres mas facil aun, una sola clase en el <ul> y despues en el CSS lo instancias al <li>

.clase-de-ul li{

}

Digo para que no crea que solo por tener 1000 items de <li> va a tener que poner 1000 estilos

[mpozo]

Acostumbrate a usar flex

Código CSS:

ul {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    border: 1px solid rgb(138, 129, 129);
}
 
li {
    height: 2rem;
    line-height: 2rem;
    padding: 0 1rem;
    text-align: center;
    background: rgb(255, 0, 0);
}
 

Código HTML:

<nav>
    <ul>
        <li>Opción 1</li>
        <li>Opción 2</li>
        <li>Opción 3</li>
        <li>Opción 4</li>
        <li>Opción 5</li>
        <li>Opción 6</li>
        <li>Opción 7</li>
        <li>Opción 8</li>
        <li>Opción 9</li>
    </ul>
</nav>
 

Añade o elimina opciones y verás que se adapta. Claro, se adapta hasta un limite si el número de opciones es excesiva para el padding que se le ha dado

[KATHYU]

mpozo, pero ese <ul> y <li> deben llevar clase verdad ?? digo por si hay otros mas ??

Es por si alguien sin conocimiento CSS ve el ejemplo.

[mpozo]

Todo depende de la especifidad que se necesite. Se puede ser específico sin la necesidad de usar class o id

Código CSS:

nav ul, nav ul li
 

[yopmail]

Mi metodo no ha funcionado del todo bien, ya que descuadra toda la página xD

Iniciado por mpozo

Acostumbrate a usar flex

Código CSS:

ul {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    border: 1px solid rgb(138, 129, 129);
}
 
li {
    height: 2rem;
    line-height: 2rem;
    padding: 0 1rem;
    text-align: center;
    background: rgb(255, 0, 0);
}
 

Código HTML:

<nav>
    <ul>
        <li>Opción 1</li>
        <li>Opción 2</li>
        <li>Opción 3</li>
        <li>Opción 4</li>
        <li>Opción 5</li>
        <li>Opción 6</li>
        <li>Opción 7</li>
        <li>Opción 8</li>
        <li>Opción 9</li>
    </ul>
</nav>
 

Añade o elimina opciones y verás que se adapta. Claro, se adapta hasta un limite si el número de opciones es excesiva para el padding que se le ha dado

Tu codigo es buenisimoooo.. cumple a la perfección el objetico, que es dejar un sitio ordenado.. tras probar el unico problemilla estetico que tiene es el siguiente:



Que en la segunda fila hay dos <li> los pone en cada esquina.. xD me imagino que este metodo esta enfocado a los menus y no a webs rollo blogs..

Una pregunta, que os parece este codigo:

Código PHP:

      <ul>
        <li>Opción 1</li>
        <li>Opción 2</li>
        <li>Opción 3</li>
        <li>Opción 4</li>
        <li>Opción 5</li>
        <li>Opción 6</li>
        <li>Opción 7</li>
        <li>Opción 8</li>
        <li>Opción 9</li>
    </ul> 
   

Código CSS:

ul {
 margin-left: -10px;
 box-sizing: border-box;
}
 
li {
   float:left;
margin-left: 10px;
 
}
 

Ah y +1 a todos vuestros aportes, GRACIAS :)

[Rafael]

Independientemente que se haga con flex, voy a responder la pregunta original, que no fué atendida.

Iniciado por yopmail

¿Cómo eliminar el espacio que queda siempre al lado izquierda al hacer una lista con <ul><li>?

Simplemente quitas el padding del padre, del UL.

ul {padding: 0;}

---

A veces es bueno pensar "fuera de la caja" en este caso el li era sólo la víctima de la caja contenedora.

[yopmail]

Muchas Gracias Rafael :)

El problema es que si el <li> tiene un margen-left, el padding no elimina esa condicion.. incluso con un !important..

Pero gracias por la ayuda ^^ +1

[Rafael]

Tienes que diferenciar claramente qué pasa en qué nivel. Obviamente tu margin left no va a ser eliminado. La pregunta inicial es de un "Espacio que siempre aparece al hacer una lista con ul y li".

Para tu otro "problema" que ya propusiste usar un margin right, es usar un first-child.

li:first-child {margin-left: 0;}

[mpozo]

Pensé que la galería era horizontal. Prueba con este otro

Código CSS:

div ul {
    list-style: none;
    padding: 0;
    border: 1px solid rgb(138, 129, 129);
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
 
div ul li {
    text-align: center;
    position: relative;
    width: 25%;
    padding: 1rem .6rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
div ul li div {
    height: 3rem;
    line-height: 3rem;
    margin: 0 1rem;
    background: rgb(255, 0, 0);
}
 

Código HTML:

<div>
    <ul>
        <li><div>Opción 1</li>
        <li><div>Opción 2</li>
        <li><div>Opción 3</li>
        <li><div>Opción 4</li>
        <li><div>Opción 5</li>
        <li><div>Opción 6</li>
        <li><div>Opción 7</li>
        <li><div>Opción 8</li>
        <li><div>Opción 9</li>
        <li><div>Opción 10</li>
    </ul>
</div>