Animation


DIVs vs. Tables

Float Layouts

Inline Blocks

Block Layouts


Centering

Split Bkgrd

Graphic Borders

Horizontal Lists

CSS Colors


.htaccess

Block IPs

Down for Maintenance

Page Redirect

Custom Error Pages


Escaping query strings

PNG transparency

Google App testing

Flash Optimizing

Avoid AS Statics

SEO Optimization



Horizontal Lists

In the past a list of items, presented horizontally were often done without CSS style. They Just | Be | Like | This.

That is a nice easy approach, but using the HTML and CSS method of horizontal lists, you get the advantage of assigning actual meaning to the list such that the web knows it really is a list. HTML is semantic. Search engines, because of HTML list codes, will know you are showing a list. This can lead to better understanding by search engines.

So here we show the code for make a bulleted horizontal list.

And here is the code:

<ul>
<li style='display: inline;'>&bull; list item 1</li>
<li style='display: inline;'>&bull; item 2</li>
<li style='display: inline;'>&bull; 3rd item</li>
<li style='display: inline;'>&bull; item 4</li>
</ul>

See how the 'inline' value for 'display' is the key to making the list horizontal. Unfortunately this removes the default bullet marker so we have to provide our own. I use the entity for a basic bullet.

To re-iterate, the purpose of using HTML/CSS to specify the horizontal list is so that the web knows it is a list. This is beneficial for searching, indexing, formatting, and any other reason meaning and context might be applied to your document.



Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page:

<a href='http://upwithabang.com/articles/css-horizontal-lists'>horizontal lists with css</a>