Marge indésirable dans les éléments de liste inline-block

Question

J'ai le HTML suivant :

    <ul>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
        <li>
        <div>first</div>
        </li>
    </ul>

et les règles css suivantes :

        ul {
            padding: 0;
            border: solid 1px #000;
        }
        li {
            display:inline-block;
            padding: 10px;
            width: 114px;
            border: solid 1px #f00;
            margin: 0;
        }

        li div {
            background-color: #000;
            width: 114px;
            height: 114px;
            color: #fff;
            font-size: 18px;
        }

Pour une raison étrange, les éléments de la liste apparaissent avec une marge autour d'eux dans Firefox et Chrome. Dans firebug, les éléments de la liste n'ont pas de marge du tout, mais il semble y avoir un espace vide entre eux.

Si, par la suite, j'ajoute d'autres éléments de liste via javascript en utilisant

$('<li><div>added via js</div></li>').appendTo($('ul'));

la "marge" n'apparaît pas autour des nouveaux éléments :

Une idée de ce qui se passe ici ?

Answer 1

Cela est dû au fait que display: inline-block;

li {
    display: inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
}

Changez-le en float: left; .

Je pensais que c'était le rembourrage mais en regardant de plus près, je me suis rendu compte que c'était l'écran :)

Exemple ici .

---

Après recherche supplémentaire J'ai découvert que inline-block est une méthode dépendante des espaces blancs et rend une marge de 4px à droite de chaque élément.

Pour éviter cela, vous pouvez exécuter tous vos li en une seule ligne, ou bloquez les balises de fin et de début ensemble comme ceci :

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Exemple ici .

J'espère que cela vous aidera :)

Answer 2

J'ai trouvé une très bonne astuce pour surmonter ce même problème. Les éléments de ma liste dans mon menu supérieur avaient des marges d'espacement entre chacun d'eux après que j'ai abandonné "float:left ;" en faveur de "display:inline-block ;".

Essayez de définir la taille de la police pour la liste non ordonnée à "0", c'est-à-dire :

ul { font-size:0; }
li { font-size:18px; }

Ça a marché pour moi.

Answer 3

En voyant ce message et les réponses données, j'ai pensé que je pourrais expliquer ce qui se passe ici. Il ne s'agit pas d'un bogue, mais bien du comportement voulu de l'inline-block.

La meilleure façon d'illustrer pourquoi c'est le bon comportement est d'utiliser des smileys dans un paragraphe :

<p>
  Hi, really glad to hear from you yesterday 
  <img src="annoying_smiley.gif"/><img src="annoying_smiley.gif"/>.
</p>

Par défaut, les images sont affichées en tant qu'inline-block (IE : un élément de bloc qui obéit au flux inline - comme un simple caractère de texte). Dans ce cas, vous souhaitez que les deux smileys soient placés l'un à côté de l'autre, mais vous devez laisser un espace entre "hier" et le premier smiley.

J'espère que cela explique la situation, ainsi que la raison pour laquelle le support complet de l'inline-block a pris tant de temps ; il n'y a pas vraiment de cas d'utilisation pour l'utiliser comme prévu.

Pour répondre à votre question, votre meilleure chance serait de faire ceci :

ul {
  height: some set height
       /* OR */
  overflow-y: auto;
}

ul li {
  float: left;
}

Answer 4

À mon avis et dans ce cas, la meilleure chose à faire est de supprimer l'espacement entre les lettres de l'alphabet. li et de le replacer sur l'étiquette de l'utilisateur. li !

Donc votre règle CSS :

ul{
    padding: 0;
    border: solid 1px #000;
    letter-spacing  :-4px; /*Remove the letter spacing*/
}
li{
    display:inline-block;
    padding: 10px;
    width: 114px;
    border: solid 1px #f00;
    margin: 0;
    letter-spacing  :0px; /*Put back the letter spacing*/ 

}

Answer 5

Supprimer tout </li> tags. Je ne sais pas pourquoi mais cela résout votre problème de marge.

<ul>
    <li>
        <div>first</div>
    <li>
        <div>first</div>
    <li>
        <div>first</div>
    <li>
        <div>first</div>
</ul>