Question

My HTML is as follows:

<ul id='nav'>     <li><a href='./'>Home</a></li>     <li><a href='/About'>About</a></li>     <li><a href='/Contact'>Contact</a></li> </ul> 

And my css:

#nav {     display: inline; } 

However the whitespace between the li’s shows up. I can remove the whitespace by collapsing them like so:

<ul id='nav'>     <li><a href='./'>Home</a></li><li><a href='/About'>About</a></li><li><a href='/Contact'>Contact</a></li> </ul> 

But this is being maintained largely by hand and I was wondering if there was a cleaner way of doing it.

Answer 1

Several options here, first I’ll give you my normal practice when creating inline lists:

<ul id='navigation'>   <li><a href='#' title=''>Home</a></li>   <li><a href='#' title=''>Home</a></li>   <li><a href='#' title=''>Home</a></li> </ul> 

Then the CSS to make it function as you intend:

#navigation li    {     display: inline;     list-style: none;   } #navigation li a, #navigation li a:link, #navigation li a:visited   {     display: block;     padding: 2px 5px 2px 5px;     float: left;     margin: 0 5px 0 0;   } 

Obviously I left out the hover and active sets, but this creates a nice block level navigation, and is a very common method for doing this while still keeping with standards. /* remember to tweak to your liking, add color to the background, et cetera */

If you would like to keep it just with text and just inline, no block elements I believe you’d want to add:

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */ 

Realizing you would like to REMOVE the whitespace, just adjust the margins/padding accordingly.