How are inline list created?
Using an inline list is a simple way to structure horizontal navigation. And unlike some elements of CSS, this only takes online and works even if the browser was rudimentary style sheet support (like Netscape 4.x):
li { display: inline; list-style: none; }
This works only works on unordered lists in Netscape 4 If it’s a order list add:
ol { list-style: none; }
Netscape 4.x on the Macintosh displays a question mark instead of hiding the bullet. As a result, the colour of the li will have to match the background colour of the list, and the links will need to be a give a new colour:
li { display: inline; list-style: none; color: #FFF; background: #FFF; }
a { color: #00F; background: #FFF; }
Finally, for CSS2-compliant browsers, you can even add separators (like the |) between lists by including:
li::after { content: " | "; color: #000; background: #FFF; }
To prevent the last item from having a separator, add a specific class to the last li, and/or use the CSS3 psuedo-class, :last-child:
li.lastItem, li:last-child::after { content: ""; }
For more in this, visit Listamatic and Listutorial.