You can often see a number of links distributed horizontally separated by pipe "|", the graphic symbol dell'asticella vertical. . In addition, if there is a good writing HTML, you realize that this list of links - apparently horizontal - are nothing but bulleted lists UL or OL . It follows that instead of writing:
1 2 3 |
It would be better to use:
1 2 3 4 5 |
But add the pipe as a dirty character code so clean. We can alternatively use a border, using the 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; } |
Obtaining:
We note two problems: the first link has the padding on the left and the last link has the pipes to the right, which is not nice to see! del CSS2, per formattare graficamente la nostra lista. This is so that you can use the pseudo-classes :first-child and :last-child of CSS2, graphical format for our list. Using the following style sheet on the first HTML:
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: 1px solid # 666; } / * Remove padding from the "first child", the first LI * / ul li: first-child { 0 12px 0 0 ; padding: 0 12px 0 0; } / * Removes the edge "last child", LI * / ul li: last-child { 0 0 0 12px ; padding: 12px 0 0 0; none ; border: none; } |
Thus obtaining a better result:
Of course, as often happens, pay attention to compatibility with different browsers, especially Internet Explorer.
Variation of the float
Even better, if you want to avoid the float , use this 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; } |
Identical results, at least on FireFox 
Why, according to your point of view, the syntax
<A href = "# 1" .....is worse
<A href = "....?In terms of coding, I see no obvious benefit, or rather, I see, but still relatively negligible and can be integrated. He's missing something?
@ Julius: quality of code you tend to write HTML, no matter where the graphic finish. It follows that a "list" of links, being just a list, should be listed as
UL LI. Then display it horizontally or vertically, it should be - in fact - the task of CSS. However there is nothing wrong with writing a sequence of links as a series of TAGA. The issue is that eliminating the style sheets as shown in the page? Using a sequence of TAGA, separated by pipes, so they will be visible even in the absence of the style sheet. Using instead a listUL LIpage will still look nice and readable without style sheet.Interesting tricks. However, trying the latest solution (replacing the float with display: inline), the layout of the menu changes slightly. That is the padding is not equal to the right and left, as is the case with the float.
S.
; anche se molto dipende dal browser utilizzato. @ SXE: obviously the behavior
floatis not identical to thedisplay:inline; although much depends on the browser used. ildisplay:inlineè, a mio avviso, migliore rispetto alfloatche, come ben sai, ha altri problemi di layout… However, acting on themarginandpaddingondisplay:inlineis, in my opinion, better than thefloat, as you well know, has other layout problems ...