Muitas vezes você pode ver um número de links distribuídos horizontalmente separados por pipe "|", o símbolo gráfico dell'asticella vertical. . Além disso, se houver uma boa escrita HTML, você percebe que esta lista de links - aparentemente horizontal - nada mais são que listas com marcas UL ou OL . Segue-se que em vez de escrever:
1 2 3 |
Seria melhor usar:
1 2 3 4 5 |
Mas adicione o tubo como um código de caractere suja tão limpa. Podemos usar em alternativa uma fronteira, usando o 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; } |
Obtenção de:
Podemos ver dois problemas: o primeiro link tem o padding do lado esquerdo e tem a última ligação dos tubos para a direita, o que não é bom ver! del CSS2, per formattare graficamente la nostra lista. Isto é assim que você pode usar as classes pseudo- :first-child e :last-child de CSS2 formato, gráfica para nossa lista. Usando a folha de estilo a seguir sobre o HTML primeiro:
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 ; margem: 1px solid # 666; } / * Remove o preenchimento do "primeiro filho", o primeiro LI * / ul li: first-child { 0 12px 0 0 ; padding: 0 12px 0 0; } / * Remove a borda "último filho", LI * / ul li: last-child { 0 0 0 12px ; padding: 12px 0 0 0; none ; border: none; } |
Obtendo assim um melhor resultado:
Claro que, como muitas vezes acontece, preste atenção a compatibilidade com navegadores diferentes, especialmente Internet Explorer.
Variação do flutuador
Ainda melhor, se você quiser evitar a float , use 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, pelo menos no FireFox 
Por que, de acordo com seu ponto de vista, a sintaxe
<A href = "# 1" .....é pior
<A href = "....?Em termos de codificação, não vejo nenhuma vantagem óbvia, ou melhor, eu vejo, mas ainda relativamente insignificante e pode ser integrado. Ele está faltando alguma coisa?
@ Julius: qualidade de código que você tendem a escrever HTML, não importa onde o acabamento gráfico. Segue-se que "a lista", uma das ligações, sendo apenas uma lista, devem ser listados como
UL LI. Em seguida, exibi-lo na horizontal ou vertical, deve ser - de fato - a tarefa de CSS. No entanto não há nada errado com a escrita de uma sequência de links como uma série de TAGA. A questão é que eliminando as folhas de estilo, como mostrado na página? Usando uma seqüência de TAGA, separados por tubos, para que eles serão visíveis, mesmo na ausência da folha de estilo. Usando, em vez de uma listaUL LIpágina ainda bonita e legível, sem folha de estilo.Truques interessantes. No entanto, tentando a última solução (que substitui o flutuador com display: inline), o layout do menu muda um pouco. Que é o preenchimento não é igual à direita e à esquerda, como é o caso com o float.
S.
; anche se molto dipende dal browser utilizzato. @ SXE: obviamente, o comportamento
floatnão é idêntico ao dodisplay:inline; embora muito depende do browser usado. ildisplay:inlineè, a mio avviso, migliore rispetto alfloatche, come ben sai, ha altri problemi di layout… No entanto, sob amarginepaddingemdisplay:inlineé, na minha opinião, melhor do que afloat, como você bem sabe, tem problemas de layout outras ...