CSS et boutons alignés horizontalement

**le Mer Mai 09, 2007 5:02**

Bonjour,

J'ai une bête question sur le CSS
Si on considère bêtement le code ci-dessous. celui ci affiche 3 boutons alignés verticalement.
Comment peut-on le modifier pour qu'il affiche les boutons horizontalement les uns à côté des autres ?

Merci

Code: Tout sélectionner: <html> <head> <style type="text/css"> div#menu { height: auto; width: 150px; } div#menu li { height: 30px; width: 125px; margin: 10px; font-family: Arial, Helvetica, sans-serif; font-size: small; text-align: center; line-height: 200%; list-style-type: none; background-image: url(testup.jpg); background-repeat: no-repeat; } div#menu li a { display: block; width: 100%; height: 100%; text-decoration: none; } div#menu li a:link { color: blue: } div#menu li a:visited { color: #900; } div#menu li a:hover { font-weight: bold; color: red; } div#menu li a:active { font-weight: bold; color: red; background-image: url(testdown.jpg); background-repeat: no-repeat; } </style> </head> <body> <div id="menu"> <ul> <li><a href="link1.html">Lien1</a></li> <li><a href="link2.html ">Lien2</a></li> <li><a href="link3.html ">Lien3</a></li> </ul> </div> </body> </html>

[Edit HawkEye: [ code] & [ /code]

]

**le Mer Mai 09, 2007 5:14**

=> http://css.alsacreations.com/Bases-et-i ... ses-en-CSS
Le 4e exemple peut être ? :wink:

Un float left et des magin et ça devrait faire l'affaire pour un affichage horizontale ...

**le Mer Mai 09, 2007 6:42**

Hello,

Essaie un display:inline pour l'élément div#menu li a.

Au pire, si ça ne fonctionne pas, place ce display:inline sur div#menu li, ça devrait aller.

@++

**le Mer Mai 09, 2007 7:22**

J'avais essayé de rajouter un
display: inline; dans l'un et l'autre puis dans les deux. Mais çe ne marche dans aucun cas...
Je ne vois pas pourquoi

**le Mer Mai 09, 2007 8:03**

display:inline sur div#menu li, ca devrait marcher

**le Mer Mai 09, 2007 19:51**

avec display:inline dans le div#menu li,
seul le "Lien1" est visible, et encore sans l'image de fond. Bref c'est loin d'être bon...

**le Mer Mai 09, 2007 20:02**

Bête truc mais quand tu fais le display:inline sur le div#menu li, essaye de modifier aussi la largeur de ton conteneur, car 125 px c'est sans doute trop court pour tout afficher.

CSS et boutons alignés horizontalement

CSS et boutons alignés horizontalement

Lectures recommandées sur ce thème :

Qui est en ligne