Comment puis-je bloquer des éléments de ligne dans une rangée?

Question

J'ai plusieurs blocs d'éléments que je veux être côte à côte pour créer un menu. La largeur de chaque est définie sur auto pour accueillir le texte à l'intérieur. Chaque élément est affiché comme une cellule de tableau et peut fonctionner avec un positionnement absolu ou relatif.

Merci pour toute aide. Mike

Answer 1

display: inline-block

Answer 2

Si vous flottez éléments de bloc, ils seront placés dans une rangée horizontale (avec des largeurs dynamiques sauf si vous spécifiez un fixe.)

ul#navigation li { 
    float: left; 
} 

Jetez un oeil au HTML pour la navigation cette page, par exemple (Questions, tags, utilisateurs, ...)

Answer 3

C'est an almost similar scenario que vous pouvez envisager d'utiliser pour créer un menu.

Answer 4

Je serais allé avec display: inline-block pour l'affichage côte à côte générique mais vous essayez de faire une navigation horizontale. Je n'utiliserais pas l'affichage de la cellule du tableau car c'est bizarre et vous finirez par devoir nettoyer d'autres bogues.

html:
< id = ul " navigation " >
<li> < a href = " /some-link.html " > Certains lien </a > </li >
<li> < a href = " /some-link2.html " > Certains liens 2 </a > </li >
<li> < a href = " /some-link3.html " > un lien trois </a > </li >
</ul >

css:
#navigation {
largeur: 550px;
marge: 0;
rembourrage: 0;
type de style de liste: aucun;
dépassement de capacité: masqué;
}
#navigation li {
float: left;
}

#navigation li a, # navigation li a: hover {
display: block;
rembourrage: 4px 21px 4px 20px;
décoration de texte: aucune;
}

Answer 5

Comme mentionné ci-dessus les blocs en ligne sont la voie à suivre. Cet article mozilla sera utile pour le faire fonctionner dans tous les navigateurs.

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/