Vous pouvez souvent voir un certain nombre de liens répartis horizontalement séparées par pipe "|", verticale, le symbole graphique dell'asticella. . De plus, si il ya une bonne écriture HTML, vous vous rendez compte que cette liste de liens - apparemment horizontale - ne sont que des listes à puces UL ou OL . Il s'ensuit qu'au lieu d'écrire:
1 2 3 |
Il serait préférable d'utiliser:
1 2 3 4 5 |
Mais ajoutez le tuyau comme un code sale caractère si propre. Nous pouvons également utiliser une frontière, en utilisant le code:
1 2 3 4 5 6 | ul li { none ; list-style: none; left ; float: left; 0 12px 0 12px ; padding: 12px 0 0 12px; 1px solid #666 ; border-right: 1px solid # 666; } |
Obtention:
Nous pouvons voir deux problèmes: le premier lien a le padding sur la gauche et le dernier maillon a des tuyaux vers la droite, ce qui n'est pas belle à voir! del CSS2, per formattare graficamente la nostra lista. Il en est ainsi que vous pouvez utiliser les classes de pseudo- :first-child et :last-child de CSS2, format graphique pour notre liste. Utilisation de la feuille de style suivante sur le HTML d'abord:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ul li { none ; list-style: none; left ; float: left; 0 12px 0 12px ; padding: 12px 0 0 12px; 1px solid #666 ; border: solid 1px # 666; } / * Suppression de la padding "premier enfant", le premier LI * / ul li: first-child { 0 12px 0 0 ; padding: 0 12px 0 0; } / * Supprime le bord "dernier enfant", LI * / ul li: last-child { 0 0 0 12px ; padding: 12px 0 0 0; none ; border: none; } |
Ainsi l'obtention d'un meilleur résultat:
Bien sûr, comme cela arrive souvent, attention à la compatibilité avec différents navigateurs, notamment Internet Explorer.
Variation du flotteur
Encore mieux, si vous voulez éviter le float , utilisez ce code:
1 2 3 4 5 6 7 8 9 10 11 12 13 | ul li { none ; list-style: none; inline ; display: inline; 0 12px 0 12px ; padding: 12px 0 0 12px; 1px solid #666 ; border-right: 1px solid # 666; } ul li: first-child { 0 12px 0 0 ; padding: 0 12px 0 0; } ul li: last-child { 0 0 0 12px ; padding: 12px 0 0 0; none ; border: none; } |
Des résultats identiques, au moins sur FireFox 
Pourquoi, selon votre point de vue, la syntaxe
<A href = "# 1" .....est pire
<A href = "....?En termes de codage, je ne vois aucun avantage évident, ou plutôt, je vois, mais encore relativement négligeable et peut être intégré. Il manque quelque chose?
@ Jules: la qualité de code vous avez tendance à écrire en HTML, peu importe où la finition graphique. Il s'ensuit qu'une «liste» des liens, d'être juste une liste, devrait être répertorié comme
UL LI. Ensuite, il affiche horizontalement ou verticalement, il doit être - en fait - la tâche de CSS. Cependant il n'y a rien de mal à écrire une suite de liens comme une série de TAGA. Le problème est que l'élimination des feuilles de style, comme indiqué dans la page? Grâce à une séquence de TAGA, séparés par des tuyaux, ils seront donc visibles même en l'absence de la feuille de style. Utiliser plutôt une listeUL LIpage sera toujours l'air agréable et lisible sans feuille de style.Trucs intéressants. Cependant, en essayant la dernière solution (qui remplace le flotteur avec display: inline), l'agencement des changements de menu légèrement. C'est le rembourrage n'est pas égale à la droite et à gauche, comme c'est le cas avec le flotteur.
S.
; anche se molto dipende dal browser utilizzato. @ SXE: évidemment le comportement
floatn'est pas identique à ladisplay:inline; bien que beaucoup dépend du navigateur utilisé. ildisplay:inlineè, a mio avviso, migliore rispetto alfloatche, come ben sai, ha altri problemi di layout… Toutefois, agissant sur lamarginet depaddingsurdisplay:inlineest, à mon avis, mieux que lefloat, comme vous le savez bien, a des problèmes de mise en page d'autres ...