Comment faire pour * vraiment * justifier un menu horizontal en HTML + CSS ?

Question

Vous trouverez de nombreux tutoriels sur les barres de menu en HTML, mais pour celui-ci (même si à mon humble avis générique), je n'ai pas trouvé de solution convenable:

#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #

• Il y a un nombre variable de texte-seulement les éléments de menu et de la mise en page est fluide.
• Le premier élément de menu doit être aligné à gauche, le dernier élément de menu doit être aligné à droite.
• Les éléments restants devraient être répartis de manière optimale sur la barre de menu.
• Le nombre est variable,donc il n'y a aucune chance pour pré-calculer le optimal largeurs.

Notez qu'une TABLE ne fonctionne pas ici:

• Si vous le centre de toutes les TDs, le premier et le dernier élément ne sont pas alignées correctement.
• Si vous les aligner et de les aligner à droite le premier resp. le dernier élément, l'espacement entre sous-optimales.

N'est-il pas étrange qu'il n'y a pas de moyen évident de mettre en œuvre ce de façon propre en utilisant HTML et CSS?

Answer 1

La chose la plus simple à faire est de est de forcer la ligne de rupture par l'insertion d'un élément à la fin de la ligne qui va occuper plus de la gauche de l'espace disponible et ensuite de le cacher. J'ai accompli cela assez facilement avec un simple span élément comme suit:

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>

  <span></span>
</div>

L'accompagnement CSS est assez simple:

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu li {
  display: inline-block;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

Tous les déchets à l'intérieur de l' #menu span sélecteur est (autant que je l'ai trouvé) nécessaires à la merci de la plupart des navigateurs. Elle doit forcer la largeur de l' span élément à 100%, ce qui devrait provoquer un saut de ligne, car il est considéré comme un élément inline en raison de l' display: inline-block règle. inline-block également fait l' span possible de bloquer au niveau des règles de style comme width ce qui provoque l'élément à rentre pas en ligne avec le menu et donc le menu de saut de ligne.

Bien sûr, vous devez ajuster la largeur de l' span à votre cas d'utilisation et le design, mais j'espère que vous avez l'idée générale et peut s'adapter.

Answer 2

Ok, cette solution ne fonctionne pas sur IE6 / 7, à cause du manque de support de: before /: after, mais:

le html:

 <div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
  </ul>
</div>
 

le css:

 ul{
    text-align:justify;
    list-style: none; list-style-image: none; margin: 0; padding: 0;
}
ul:after{content:""; margin-left:100%;}
li{display:inline;}
a{display:inline-block;}
 

La raison pour laquelle j'ai le tag a en tant que bloc en ligne est que je ne veux pas que les mots qu'il contient soient également justifiés, et que je ne veuille pas non plus utiliser d'espaces insécables.

Answer 3

Vous avez une solution. Fonctionne dans FF, IE6, IE7, Webkit, etc.

Assurez-vous de ne mettre aucun espace avant de fermer le span.inner . IE6 va casser.

HTML:

 <div class="outer">
<span class="inner">THE MENU ITEMS</span>
<span class="inner">SHOULD BE</span>
<span class="inner">JUSTIFIED</span>
<span class="inner">JUST AS</span>
<span class="inner">PLAIN TEXT</span>
<span class="inner">WOULD BE</span>
<span class="finish"></span>
</div>
 

CSS (vous pouvez éventuellement donner une largeur à .outer ):

 .outer {text-align: justify}
.outer span.finish {display: inline-block; width: 100%}
.outer span.inner {display: inline-block; white-space: nowrap}
 

Answer 4

Fonctionne avec Opera, Firefox, Chrome et IE

 ul {
   display: table;
   margin: 1em auto 0;
   padding: 0;
   text-align: center;
   width: 90%;
}

li {
   display: table-cell;
   border: 1px solid black;
   padding: 0 5px;
}
 

Answer 5

encore une autre solution. Je n'avais aucune option pour m'attaquer au html comme l'ajout d'une classe distinguée, etc., alors j'ai trouvé un moyen purement CSS.

Fonctionne dans Chrome, Firefox, Safari..Ne sait pas sur IE.

Test: http://jsfiddle.net/c2crP/1

HTML:

 <ul>
  <li>
    <a href="#">home</a>
  </li>
  <li>
    <a href="#">exposities</a>
  </li>
  <li>
    <a href="#">werk</a>
  </li>
  <li>
    <a href="#">statement</a>
  </li>
  <li>
    <a href="#">contact</a>
  </li>
</ul>
 

CSS:

 ul {
   margin: 0; 
   padding: 0; 
   list-style: none; 
   width: 200px; 
   text-align: justify; 
   list-style-type: none;
}
ul > li {
   display: inline; 
   text-align:justify; 
}
// declaration below will add a whitespace after every li. This is for one line codes where no whitespace (of breaks) are present and the browser wouldn't know where to make a break. 
ul > li:after {
   content:' '; 
   display:inline;
}
ul > li:last-child:after {
   display:inline-block; // notice the 'inline-block'! Otherwise won't work for webkit which puts after pseudo el inside of it's parent instead of after thus shifting also the parent on next line!
   margin-left:100%; 
   content:' ' 
}