Come rimuovere il margine predefinito di inline elementi li?

Ho il seguente codice html

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

e folliwing css

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
}

DEMO

Sto cercando di rimuovere il margine tra gli elementi li impostando margin: 0;. Ma non eliminare il margine

Come rimuovere il margine predefinito di inline elementi li?

Come faccio a rimuovere



7 Replies
  1. 16

    La combinazione di tutti e lis in una sola riga risolve il problema. Ma se volete sapere di più tecniche per rimuovere i margini è possibile visitare : http://davidwalsh.name/remove-whitespace-inline-block.

    Elenca queste tecniche:

    1. Spazio Tra Gli Elementi

    <ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

    2. font-size: 0 su Padre

    .inline-block-list { /* ul or ol with this class */
    font-size: 0;
    }
    
    .inline-block-list li {
    font-size: 14px; /* put the font-size back */
    }

    3. Commenti HTML

    <ul>
     <li>Item content</li><!--
     --><li>Item content</li><!--
     --><li>Item content</li>
    </ul>

    4. Margine Negativo

    .inline-block-list li {
    margin-left: -4px;
    }

    5. Eliminazione Di Chiusura Angolo

    <ul>
     <li>Item content</li
     ><li>Item content</li
     ><li>Item content</li>
    </ul>
  2. 5

    Provare float: left; Che forzerà il vostro elenco di elementi per essere reso senza spazi.

    li {
        display: inline-block;
        padding: 10px;
        border: 1px solid red;
        margin: 0;
        float: left;
    }
  3. 4

    La sua una cosa strana, in cui è necessario rimuovere gli spazi bianchi di dare un’occhiata a questo violino

    <ul>
        <li>one</li><li>two</li><li>three</li>
    </ul>

    http://jsfiddle.net/TPje6/3/

    un’altra cosa che puoi fare è aggiungere un margin: -2px; : http://jsfiddle.net/TPje6/6/

    Float trucco funziona bene, ma rende lo styling in una posizione più difficile

    • mentre che funziona, provare il font-size hack ho proposto di mantenere il vostro html leggibile.
    • Mi piace il font hack idea, mi piace anche il galleggiante idea. Quindi, se si dispone di un div contenitore che si può solo galleggiare gli elementi e che siano nella giusta posizione.
  4. 2

    Modificare il markup in una linea per rimuovere default bianco-spazi

    <ul>
        <li>one</li><li>two</li><li>three</li>
    </ul>

    Css

    li {
        display: inline; //Change
        padding: 10px;
        border: 1px solid red;
        margin: 0;
    }

    Demo

  5. 2

    Questo è un fastidioso effetto collaterale di come lo spazio viene eseguito il rendering di elementi. Ci sono alcune opzioni che mi vengono in mente per affrontare il problema.

    Opzione 1:
    utilizzare il float: left proprietà sulla li elementi

    jsfiddle

    li {
        display: inline-block;
        padding: 10px;
        border: 1px solid red;
        margin: 0;
        float: left;
    }

    Opzione 2:
    Rimuovere gli spazi di markup html

    jsfiddle

    <ul>
        <li>one</li><li>two</li><li>three</li>
    </ul>

    Opzione 3:
    Impostare il font-size proprietà di ul per 0px

    jsfiddle

    ul {
        font-size: 0px;
    }
    
    li {
        display: inline-block;
        padding: 10px;
        border: 1px solid red;
        margin: 0;
        font-size: 16px;
    }
  6. 0

    Si potrebbe fare la li essere font-size: 0;
    e quindi impostare il li a normale font-size

    In questo modo si renderà il spazi 0 pixel di larghezza e mantenere il vostro html pulito e di facile lettura.

    • Questo non è un hack. È il comportamento previsto. Lo spazio di un elemento inline è determinato dal font-size. Semplicemente impostando un font-size di 0 non è un hack a tutti. Questa soluzione ha esito negativo se si desidera impostare un font-size in em unit anche se.
    • felice? editato la mia risposta
  7. 0

    Utilizzare la seguente regola css per rendere lo stile

    li {
        border: 1px solid #FF0000;
        display: table-column-group;
        float: left;
        margin: 0;
        padding: 10px;
       }

    Come rimuovere il margine predefinito di inline elementi li?

Lascia un commento