Create a pipe separator through CSS
Tuesday, September 9, 2008 You'll often see a series of links distributed horizontally separated by a pipe "|", the graphic symbol dell'asticella vertical. Also, if you have a good writing HTML, you realize that this series of links - apparently horizontal - are nothing but bullets UL or OL It follows that instead of writing:
It would be better to use:
However add the pipe as a dirty character code so clean. We can alternatively use a border, using the code:
- ul li (
- none ; list-style: none;
- left ; float: left;
- 0 12px 0 12px ; padding: 0 12px 0 12px;
- 1px solid #666 ; border-right: 1px solid # 666;
- )
Obtaining:
We can see two problems: the first link has the padding on the left and the last link has the pipe to his right, which is not nice to see! So here may be to use :first-child :last-child of CSS2 to format graphically our list. Using the following stylesheet to the HTML code shown above:
- ul li (
- none ; list-style: none;
- left ; float: left;
- 0 12px 0 12px ; padding: 0 12px 0 12px;
- 1px solid #666 ; border: 1px solid # 666;
- )
- / * Remove the padding from the "first son", the first LI * /
- ul li: first-child (
- 0 12px 0 0 ; padding: 0 12px 0 0;
- )
- / * Remove border "last child", LI * /
- ul li: last-child (
- 0 0 0 12px ; padding: 0 0 0 12px;
- none ; border: none;
- )
Thereby obtain a better result:
Of course, as often happens, attention to compatibility with various browsers, especially Internet Explorer.
Variant to float
Even better, if you want to avoid the float use this code:
- ul li (
- none ; list-style: none;
- inline ; display: inline;
- 0 12px 0 12px ; padding: 0 12px 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: 0 0 0 12px;
- none ; border: none;
- )
Same result, at least in FireFox 
Related Post
Loading ... 
Why, according to your point of view, the syntax
<a href = "# 1" .....is worse
<a href = "....?In terms of coding, I see no obvious advantage, or rather, I see, but still relatively negligible and integrable. He's missed something?
@ Julius: quality of code you tend to write the HTML but neglect the graphic end. It follows that a "list" of links, being just a list, should be listed as
UL LIThen, displayed horizontally or vertically, it should be - precisely - the task of CSS. However, there is nothing wrong with writing a sequence of links as a series of TAGAThe issue is that eliminating the style sheets as shown in the page? Using a tag sequenceAseparated by pipe, they will be so visible even in the absence of the style sheet. Using instead a listUL LIpage will still look nice and readable without the style sheet.Interesting trick. However trying the latter option (replace the float with display: inline), the layout of the menu changes slightly. Or the padding is not equal to the right and left, as is the case with the float.
S.
@ sXe: obviously the behavior
floatis not identical to thedisplay:inlinealthough much depends on the browser used. However, acting on themarginandpaddingondisplay:inlineis, in my opinion, better than thefloatas you well know, has other layout problems ...