Como eliminar espacio de la izquieda de un <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 :)