12
votes

CSS Menu horizontal - également espacé?

J'ai un menu CSS standard, fait avec des balises UL et LI. J'ai besoin d'eux pour arriver à couvrir la page entière, horizontalement (pas mon cas réel, mais je vais prendre cela pour simplifier la situation). Cependant, les éléments sont créés de manière dynamique et je ne suis donc pas capable de coder de manière équitable avec des objets Li, ni des marges.

J'ai vu des solutions à l'aide de JavaScript pour définir ces valeurs mais j'aimerais vraiment les éviter.

Enfin, j'ai vu une assez bonne solution qui se contente xxx

Ceci créera le comportement souhaité dans la plupart des navigateurs ... Sauf que c'est-à-dire. < / P>

Des idées?

Edit: Merci pour les réponses. Cependant, comme le code qui génère les articles n'est pas de moi, je ne suis pas en mesure de définir des styles intégrés lors de leur création sans utiliser JavaScript plus tard.


2 commentaires

Vous avez besoin d'eux pour "couvrir la page entière"? Voulez-vous dire une largeur de 100% de 100% horizontalement, divisée de manière égale? Seriez-vous capable d'avoir des boutons standard sur chaque page, avec des sous-menus créés de manière dynamique? Aussi: quelle version d'IE donne le problème? Je suppose que c'est l'affichage : table / * ou pile de table * / qui cause des problèmes. Malgré mon dégoût intérieur, vous risquez d'utiliser de véritables tables HTML, si vous rendant de cette façon ... je suis désolé = (


Salut. Il n'est pas nécessaire de couvrir la page entière, mais j'ai fait de cette façon de simplifier la situation. Et oui, ils doivent être espacés de manière égale. Je n'ai pas compris très bien la question du bouton. Vous parlez-vous à l'élément

6 Réponses :


1
votes
#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}
The width: 18% may be about right if you have 5 elements across, accounting for border and padding. But it will vary due to how many elements you have, how much padding, etc. 

4 commentaires

Vous savez, je ne suis pas convaincu que ce qu'il a dit est ce qu'il voulait dire, en ce qui concerne le «remplir la page entière» ( hauteur: 100% ). J'assume - et je pourrais certainement avoir tort, il ne voulait dire que horizontalement. Remplir la page entière avec la navigation juste sons mal = /


La hauteur: 100% se réfère à la balise LI et que l'UL. Vraisemblablement, il a l'UL déjà réglé sur une hauteur spécifique ou a un autre élément d'emballage avec une hauteur spécifique. La hauteur: 100% garantirait simplement qu'il s'agit de tout espace disponible.


C'est vrai, lorsque vous faites référence à "remplir la page entière", je voulais dire horizontalement, désolé de ne pas avoir précisé avant. Déjà édité la question. Merci!


Je recommande de définir le remplissage sur le lien à l'intérieur du LI (s'il s'agit d'un menu) car il augmente la zone cliquable.



4
votes

Si vos éléments de menu sont générés de manière dynamique (vous ne savez donc pas combien il y aura avant), vous pouvez ajouter un style = "largeur: xx" attribut au li s (ou dans