Get <ul> to display horizontally - HELP!

Hi,

I just need for some advice off an experienced web designer/css geek

I can't get the code below to display the 6 anchor text in a straight horizontal line. I added 'display: inline' but still the list is display vertically rather than horizontally - any help guys would be much appreciated.

Thanks,

D

 

Check out this article, rather than just telling you I am posting this because it has really good information to learn about lists:

alistapart.com/articles/taminglists/

Good luck!

 

thanks for that. it is a good article.

been using a few bits of code from the article but still doesnt seem to be working.

 

You either float the <li>s or make them inline.

<ul>
<li><a href="/">Home |</a></li>
<li><a href="/example.php">Anchor Text |</a></li>
<li><a href="/example.php">Anchor Text |</a></li>
<li><a href="/example.php">Anchor Text |</a></li>
<li><a href="/example.php">Anchor Text |</a></li>
<li><a href="/example.php">Anchor Text |</a></li>
<li><a href="/example.php">Anchor Text</a></li>
</ul>
===================
ul {
  margin-left: 0;
  padding-left: 0;
  }

li {
  display: inline;
  }
============= or
ul {
  margin-left: 0;
  padding-left: 0;
  overflow: hidden;
  }

* html ul {  /*this is for IE6/
  overflow: visible;
  height: 1px;
  }

li {
  float: left;
  }

Code (markup):

There are details and gotchas to deal with, but that'll get you started.

See http://css.maxdesign.com.au/index.htm.

cheers,

gary