J'ai une sorte de menu comme this one, mais comment vous pouvez voir le code n'est pas si "bien". Je voudrais que cette marge entre le mot et la bordure soit toujours 5px par exemple, pour chaque mot.Comment faire ce menu en utilisant list et css?
Je sais que je devrais utiliser List pour ce genre de choses, mais je ne sais pas comment appliquer le style css avec la compatibilité multi-navigateur.
Pouvez-vous me donner un exemple de ce menu avec List?
Voilà comment je le ferais:
Voir:http://jsfiddle.net/thirtydot/554BT/3/
<ul class="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
.menu {
width:545px;
float:left;
margin: 0;
padding: 0;
list-style: none
}
.menu li {
float: left;
text-align: center;
padding: 0 15px;
border-left: 2px solid red
}
.menu li:first-child {
border: 0
}
Oui, ça berce, mais en fait l'espace entre la frontière et le mot n'est pas le même. Tu vois ce que je veux dire? C'est ce que je cherche :) – kwichz
@kwichz: J'ai changé ma réponse. – thirtydot
Oui, ça balance :) P.s. ce rembourrage: 0 15px; est-ce cross-browser? parce que je l'utilise pour mettre padding-left, padding-right, et ainsi de suite ... – kwichz
Try this ...
violon: http://jsfiddle.net/anish/Laqqn/
<style type="text/css">
.menu
{
width:500px;
}
.menu li
{
width:100px;
text-align:center;
float:left;
border-right:1px solid red;
}
</style>
<ul class="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
A CSS3 exemple, pas vraiment traverser le navigateur comme il utilise des sélecteurs pseudo-CSS3 CSS3 List menu
Cet autre exemple utilise une barre verticale pour séparer les liens et la sécurité du navigateur croix: CSS2 List menu
C'est ainsi que je le ferais, en gardant aussi facile (simple) possible. Il ne probablement obtenir pas moins complexe que cela:
HTML
<ul id="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
CSS
#menu {
list-style-type: none;
}
#menu li {
display: inline-block;
padding: 0 10px;
border-left: 2px solid red;
}
#menu li:first-child {
border-left: none;
}
DEMO: jsfiddle
': last-child' (CSS3) ne fonctionne pas dans IE8, qui est malheureusement largement utilisé. Vous devriez utiliser ': first-child' (CSS2) à la place si possible, car cela fonctionne dans IE7 +. Bien sûr, vous pourriez faire ce que j'avais à faire dans un commentaire sur ma réponse parce que le PO se soucie apparemment de IE6:/ – thirtydot
OMG, IE6, sérieusement? :(Je suis d'accord avec vos ': last-child' et': first-child' et j'ai changé ma réponse en conséquence, mais IE6 ne convient pas dans ma réponse car j'ai essayé de donner la réponse la moins complexe. ce but. – Bazzz
L'espace entre les frontières ne présente =
Mettez une bordure sur le côté droit de la li et le second bouton mettre un bor der sur le côté gauche de la li.
Ajoutez maintenant margin-left (ou margin-right) et voyez-le se développer.
Cela a fonctionné dans mon cas.
Bonne chance.
Tout d'abord, je ne recommande pas JSFiddle pour les problèmes CSS. Il spécifie un Doctype qui bouscule toutes les chances de développer des CSS compatibles. –
De quoi parlez-vous? Vous savez que vous pouvez changer le Doctype sur jsfiddle pour ce que vous voulez vérifier la compatibilité ?! – anothershrubery
@Cobra_Fast: De quoi parlez-vous? jsFiddle utilise par défaut le doctype HTML5, qui déclenche le mode Standards. Peut-être que vous parlez de la feuille de style de réinitialisation qui est incluse par défaut? Vous pouvez désactiver cela en décochant "CSS normalisé". – thirtydot