Cascading Style Sheets (CSS) question- LI items in horizontal display

[bbcrock]

I have several items in a UL/LI relationship. These items are nested
inside a div. I want to make the items display horizontal based on CSS
relationships only (not resorting to html tables). I read that the way
to do this is to use

display: inline;

but It's not changing the way the items display at all. Can anyone
point me to a really good description of this tag, another tag that
would move the LI items to a horizontal display or good ways to debug
CSS?

thanks!

Don

 

[David Dorward]

I have several items in a UL/LI relationship. These items are nested
inside a div. I want to make the items display horizontal
http://css.maxdesign.com.au/listamatic/

based on CSS relationships only

CSS describes presentation, not relationships.

I read that the way to do this is to use

display: inline;

That is one way. There are several.

but It's not changing the way the items display at all.

How are you using it?

Can anyone point me to a really good description of this tag, another tag
that would move the LI items to a horizontal display

Display is a property, CSS doesn't have tags.

http://www.w3.org/TR/CSS2/visuren.html#display-prop

or good ways to debug CSS?

The DOM Inspector is very useful. A good introduction is available at
http://www.brownhen.com/DI.html - but ignore everything about installing it
as that is rather out of date. It is distributed with Firefox.

 

[Adrienne Boswell]

Gazing into my crystal ball I observed (e-mail address removed) writing in

I have several items in a UL/LI relationship. These items are nested
inside a div. I want to make the items display horizontal based on CSS
relationships only (not resorting to html tables). I read that the way
to do this is to use

display: inline;

but It's not changing the way the items display at all. Can anyone
point me to a really good description of this tag, another tag that
would move the LI items to a horizontal display or good ways to debug
CSS?

thanks!

Don

css:
ul li
{
/*adding padding and border so the text does not run together visually*/
display: inline;
padding-left:1em;
padding-right:1em;
border-right:1px solid #c0c0c0;
}

html:
<ul>
<li>a</li>
<li>b</li>
<li style="border:0">c has no border</li>
</ul>