Comment répartir uniformément les éléments du menu avec CSS lors de la largeur et de la quantité n'est pas connue?

J'ai lu beaucoup de choses sur de répartir uniformément les éléments à l'aide de css, mais chaque solution que j'ai trouvé nécessite de connaître et de définir la largeur et/ou le nombre d'éléments en cours de distribution.

J'ai un conteneur qui est d'une largeur fixe - dans ici pourrait être n'importe quel nombre de li éléments d'un système automatique de largeur, qui doivent être distribués de manière égale entre le parent de l'élément de gauche à droite.

Voici mon balisage - sauf il pourrait y avoir un certain nombre d'onglets avec n'importe quelle longueur de texte en eux.

<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

Donc Même Distribution avec le css quand le nombre d'éléments et la largeur est dynamique - peut-il être fait?

Semble comme une chose évidente à faire - Merde CSS!

InformationsquelleAutor Ralphonz | 2012-05-11
  1. 16

    Pour cela, vous pouvez css display:table-cell de la propriété. Écrire comme ceci:

    .tabs{
    display:table;
    width:300px;
    border:1px solid green;
}
.tabs li{
    display:table-cell;
    border:1px solid red;
    height:40px;
}

    Cochez cette http://jsfiddle.net/px7Uf/

    • Merci!! Ne fonctionne pas sous IE 7 mais qui s'en soucie, j'en ai marre de fixer les choses pour sortir de la date de versions IE.
    • Brillant. Aussi juste une note pour toute personne qui trouve cette option pour supprimer les flotteurs que vous avez sur <li> éléments.
    • J'aimerais revenir sur cette maintenant quelqu'un a une autre façon de réaliser la même chose sans utiliser display:table-cell? Il n'a pas jouer gentil avec les menus déroulants et les transitions css.
    • ajout d'une réponse, la création de véritables colonnes de taille égale. La solution ci-dessus dépend de la longueur du contenu de l'égalité au travail.
    InformationsquelleAutor sandeep
  2. 6

    Voici une solution qui garde la même largeur contenu de dépassement de la répartition de la largeur de la cellule, à l'aide de flexbox:

    CSS:

    ul.tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.tabs>li.tab {
  flex: 1;
  text-align: center;
  /* just adding visibility to the tabs */
  border: 1px solid rgba(0,0,0,.12); 
  padding: 10px;
}

    HTML:

    <ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3. This is a very long tab and should overflow...</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

    InformationsquelleAutor Andrei Gheorghiu