A menudo se puede ver una serie de enlaces distribuidos horizontalmente separados por pipe "|", vertical el símbolo gráfico dell'asticella. . Además, si hay una buena escritura HTML, te das cuenta de que esta lista de enlaces - aparentemente horizontal - no son más que listas con viñetas UL o OL . De ello se desprende que, en lugar de escribir:
1 2 3 |
Sería mejor utilizar:
1 2 3 4 5 |
Sin embargo, añade la tubería como un código de carácter sucia tan limpio. Nos puede utilizar alternativamente una frontera, utilice el código:
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; } |
La obtención de:
Podemos ver dos problemas: el primer enlace tiene el padding a la izquierda y el último eslabón tiene las tuberías a la derecha, que no es agradable de ver! del CSS2, per formattare graficamente la nostra lista. Esto es lo que usted puede utilizar las clases pseudo- :first-child y :last-child de CSS2, el formato gráfico de nuestra lista. Utilizando la siguiente hoja de estilo en el HTML en primer lugar:
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 ; frontera: 1px solid # 666; } / * Eliminar el relleno del "primer hijo", el primer LI * / ul li: first-child { 0 12px 0 0 ; padding: 0 12px 0 0; } / * Elimina el borde "último hijo", LI * / ul li: last-child { 0 0 0 12px ; padding: 12px 0 0 0; none ; border: none; } |
Obteniendo así un mejor resultado:
Por supuesto, como sucede a menudo, presta atención a la compatibilidad con diferentes navegadores, especialmente Internet Explorer.
Variación de la flota
Incluso mejor, si se quiere evitar la float , utilice este código:
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; } |
Resultados idénticos, al menos en FireFox 
¿Por qué, según su punto de vista, la sintaxis
<A href = "# 1" .....es peor
<A href = "....?En términos de codificación, no veo ninguna ventaja evidente, o más bien, ya veo, pero todavía relativamente insignificantes y pueden integrarse. Se está perdiendo algo?
@ Julio: la calidad de código que tienden a escribir HTML, sin importar el acabado gráfico. De ello se desprende que una "lista" de los vínculos, siendo sólo una lista, debe aparecer como
UL LI. A continuación, mostrar en forma horizontal o vertical, debe ser - de hecho - la tarea de la CSS. Sin embargo no hay nada malo en escribir una secuencia de vínculos como una serie de TAGA. La cuestión es que la eliminación de las hojas de estilo como se muestra en la página? Mediante una secuencia de TAGA, separados por tubos, por lo que será visible, incluso en ausencia de la hoja de estilos. Utilizando en su lugar una listaUL LIpágina todavía se vean bien y legibles sin hoja de estilo.Trucos interesantes. Sin embargo, intentando la última solución (en sustitución de la flota con display: inline), el diseño de los cambios en el menú un poco. Ese es el relleno no es igual a la derecha e izquierda, como es el caso con el flotador.
S.
; anche se molto dipende dal browser utilizzato. @ SXE: evidentemente, el comportamiento de
floatno es idéntico aldisplay:inline; aunque mucho depende del navegador utilizado. ildisplay:inlineè, a mio avviso, migliore rispetto alfloatche, come ben sai, ha altri problemi di layout… Sin embargo, que actúa sobre elmarginypaddingendisplay:inlinees, en mi opinión, mejor que lafloat, como usted bien sabe, tiene otros problemas de diseño ...