CSS et boutons alignés horizontalement

davidtennis · 9 Mai 2007

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:

<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]

]

keroin · 9 Mai 2007

=> 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 ...

SuperCureuil · 9 Mai 2007

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.

@++

davidtennis · 9 Mai 2007

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

CashAttitude · 9 Mai 2007

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

davidtennis · 9 Mai 2007

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...

SuperCureuil · 9 Mai 2007

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.