Espacés de manière égale dans les liens de navigation qui prennent toute la largeur de l'ul en CSS3

J'aimerais créer une navigation horizontale liste de liens, où la valeur liquidative des liens sont régulièrement espacés et de prendre toute la largeur de la enfermant conteneur <ul>. Nav liens peuvent être de différentes largeurs. La première et la dernière des liens doit être aligné avec le début et la fin de la <ul> respectivement (ce qui signifie les liens ne sont pas centrées), comme ceci:

|left side..right side|

link1 link1 link3 link4

Si je ne me trompe, je ne pense pas qu'il existe un moyen de le faire dans CSS2. Mais est-il un moyen de le faire en CSS3? Sinon, je vais avoir besoin de le faire en Javascript.

OriginalL'auteur North Krimsly | 2011-06-28

  1. 6

    Si vous insistez sur CSS3, vous pouvez le faire avec box-flex. Car ce n'est pas entièrement mis en œuvre dans tous les navigateurs, les propriétés ont encore le -moz et -webkit préfixes.

    Voici le CSS:

    ul {
  display: box;
}

li {
  box-flex: 1;
}

    Mais depuis tous les navigateurs de l'utiliser, vous devez ajouter -moz-box-flex, -webkit-box-flex, etc.

    Voici une démo: http://jsfiddle.net/tBu4a/9/

    Grâce À Blender. Cette solution semble avoir le même problème que robertc ci-dessous-- les liens ne pas rincer avec de l'bords gauche et droit du récipient, tout en étant régulièrement espacés. J'ai fini par écrire un script JQuery pour ce faire, mais si il y a un moyen de le faire en CSS3 je suis toujours intéressé!
    Qu'entendez-vous par là? Vous pouvez poster votre solution? Je ne suis pas vraiment comprendre ce que tu veux dire...
    Blender, désolé si je n'ai pas l'explique très bien. Veuillez voir le commentaire sous l'robertc que j'ai posté ci-dessous, pour certains plus de contexte.
    Ohhh, ok. Pour cela, vous devez ajouter une alternance de vide li éléments et de leur donner un box-flex: 1. Le lis avec les liens serait juste normal display: inline-blocks. Permettez-moi de modifier ma solution.
    Ici ya go: jsfiddle.net/tBu4a/15

    OriginalL'auteur Blender

  2. 5

    C'est simple à faire avec CSS2:

    ul {
    display: table;
    width: 100%;
}
li {
    display: table-cell;
}
a {
    display: block;
}

    Voici un exemple de travail. Le problème n'est pas tellement que CSS2 n'ont pas les moyens de le faire, c'est que IE ne l'ai pas entièrement en charge CSS2 jusqu'à la version 8.

    --edit

    OK, maintenant, je crois que je comprends de vos besoins:

    ul {
    display: table;
    width: 100%;
    border: 0;
    padding: 0;
    background-color: blue;
}
li {
    display: table-cell;
    border: 0;
    padding: 0;
    text-align: center;
}
li:first-child {
    text-align: left;
}
li:last-child {
    text-align: right;
}
a {
    display: block;
    padding: 0.25em 0;
    background-color: white;
    text-decoration: none;
}

    Ici, il est en action. J'ai remis à zéro toutes les frontières et rembourrage en fonction de vos commentaires, vous pouvez ajouter un peu de retour, mais vous, bien sûr, besoin de remettre à zéro la bordure gauche/rembourrage du premier lien et le bord droit/remplissage de la droite lien en utilisant soit li:first-child ou li:first-child a (et le contraire last-child).

    Grâce robertc. C'est proche, mais pas tout à fait ce que je cherche. Les liens dans l'exemple que vous fournissez ne prennent pas toute la largeur de l'affichage de conteneur (le <ul>). Les bords gauche et droit de la première et de la dernière liaison doivent être de niveau avec les bords gauche et droit de la enfermant conteneur, tout en étant régulièrement espacés. C'est la partie la plus délicate de cette question.
    Ils occupent toute la largeur disponible, mais le conteneur a une frontière (de sorte que vous pouvez voir qu'ils sont de prendre toute la largeur disponible). Juste à l'ensemble de toutes les frontières à 0 si vous ne voulez pas les voir, cet exemple explique que si vous définissez une couleur d'arrière-plan sur la nav et ul éléments, il n'apparaît pas derrière le a éléments.
    Salut robertc, le 'x' dans 'six' devrait s'aligner flush avec le côté droit du conteneur, avec tous les liens étant régulièrement espacés. Dans l'exemple de code dans le lien que vous avez posté, 'six', ne pas rincer avec le côté droit du conteneur. Voir [lien]stackoverflow.com/questions/6513438/... pour le Javascript solution que j'ai écrit. Tiens encore à le faire fonctionner dans le CSS! Merci encore.
    Merci beaucoup pour vos efforts robertc-- qui est vraiment proche. Mais les liens ne sont pas espacés de manière égale en raison de l'text-align sur les premier et dernier éléments de la liste. Pourtant, je comprends que le texte s'aligne sont nécessaires afin que les liens de la ligne sur les bords du récipient.

    OriginalL'auteur robertc