Comment puis-je distribuer les éléments horizontalement avec le CSS?

Je tiens à distribuer quelques éléments de la liste à l'horizontale sur une barre, et je veux faire un code modulaire, de sorte qu'il ajuste automatiquement l'espace entre les éléments lorsque j'insère plus.

Je veux que le premier élément sur le côté extrême gauche, et l'élément de droite sur la droite, et le reste réparti entre les deux. Ils ont tous un espace égal entre les uns des autres. Pensez à séparer un segment de ligne en plusieurs morceaux, les éléments qui allaient marquer les points de séparation, ainsi que la tête/queue de l'original segment de ligne.

J'ai essayé plusieurs solutions et mis en ligne, mais ils ne font pas ce que je veux. Ils ont juste centre plus de tout comme de mettre chaque élément dans le milieu de chaque ligne de pièces en fonction de mon précédent analogie.

Quelqu'un peut-veuillez fournir une solution sympa dans le CSS?

  • Je dirais que la réponse est "avec beaucoup de difficultés". CSS est plat terrible à la distribution de l'espace entre les éléments. (Au moins jusqu'à la flexbox mise en page des trucs devient utilisable.) Si vous ne voulez pas que votre CSS dépendent du nombre d'éléments, votre choix évidents sont: l'utilisation de tables, ou insérez simplement de gauche à droite avec rembourrage.
  • Je ne suis pas sûr de ce qui est raisonnablement possible avec uniquement du CSS--je n'ai jamais fait les choses comme ça en ayant recours à JavaScript d'ajustement des largeurs. Les Tables peuvent aider, mais ils sont souvent considérés comme une mauvaise forme ces jours-ci lorsqu'il est utilisé pour autre chose que des données tabulaires.
InformationsquelleAutor Xavier_Ex | 2012-11-22
  1. 29

    Vous pouvez faire ce que vous êtes après l'utilisation de inline-block, les pseudo-éléments et text-align: justify;, mais il ne fonctionnera que dans IE8 et plus.

    Voici le code:

    <!-- HTML -->

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>
    ​
/* CSS */

ul {
    text-align: justify;
}
ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}
ul:before {
    content: '';
    display: block;
    margin-top: -1.25em;
}
li {
    display: inline-block;
    margin-right: -.25em;
    position: relative;
    top: 1.25em;
}

    Démo Live: http://jsfiddle.net/joshnh/UX9GU/

    • C'est plutôt sympa 🙂
    • Merci pour la réponse! Mais ça ne fonctionne que sur IE?
    • Il fonctionne sur tous les navigateurs modernes, et IE 8 et ci-dessus.
    • Je l'ai essayé et cela a fonctionné, mais pouvez-vous nous expliquer la magie ici?
    • La réponse à cette question ne un bon travail d'expliquer cela: stackoverflow.com/questions/11589590/...
    • Nice, je vais prendre un peu de temps à l'étude...

    InformationsquelleAutor joshnh
  2. 8

    Il y a une solution propre:

    http://radiatingstar.com/distribute-divs-images-equaly-line

    #container {
    text-align: justify;
}
#container > div {
    width: 100px; /* Declare your value. Can be in relative units. */
    display: inline-block;
    vertical-align: top;
}
#container:after {
    content: "";
    width: 100%;
    display: inline-block;
}
    InformationsquelleAutor Marcelo Amorim
  3. 7

    Comme un complément à joshnh réponse, si quelqu'un a le même problème:

    Attention: text-align: justify; a besoin d'un espace après chaque display: inline-block; élément de travail. Sinon les éléments sont traités comme un seul mot et de ne pas distribuer horizontalement.

    Si cela ne fonctionne pas:

    <!-- HTML -->
<ul><li>Item 1<li><li>Item 2<li><li>Item 3<li><li>Item 4<li></ul>

    Mais ce sera:

    <!-- HTML -->
<ul>
  <li>Item 1<li>
  <li>Item 2<li>
  <li>Item 3<li>
  <li>Item 4<li>
</ul>

    J'ai juste eu ce problème parce que nous sommes minifying notre HTML-Balisage et la minifier met tout en une seule ligne.

    InformationsquelleAutor Zwergal