Unordered List

Printable View

Feb 26, 2011, 18:18
DoubleDee

Unordered List
Dumb question for the day...

If I have an unordered list like this...
Code HTML4Strict:

<ul id="nav"> <li><a href="#">Men's</a></li> <li><a href="#">Women's</a> <li><a href="#">Boys'</a> <li><a href="#">Girls'</a> </ul>
Then why does it display like this...

Quote:

Men's Women's Boys' Girls'

And not like this...

Quote:

Men's
Women's
Boys'
Girls'

Debbie
Feb 26, 2011, 19:10
SpacePhoenix

HTML Code:

<ul id="nav"> <li><a href="#">Men's</a></li> <li><a href="#">Women's</a></li> <li><a href="#">Boys'</a></li> <li><a href="#">Girls'</a></li> </ul>

You was missing the </li> at the end of each list item after the first one
Feb 26, 2011, 19:13
DoubleDee

Quote:

Originally Posted by SpacePhoenix

HTML Code:

<ul id="nav"> <li><a href="#">Men's</a></li> <li><a href="#">Women's</a></li> <li><a href="#">Boys'</a></li> <li><a href="#">Girls'</a></li> </ul>

You was missing the </li> at the end of each list item after the first one

Thanks, but that's called a copy and paste error.

It doesn't answer the behavior I'm seeing.

Debbie
Feb 26, 2011, 19:21
Rayzur
Quote:

You was missing the </li> at the end of each list item after the first one

...and those incomplete list items were not being rendered. The reason they appeared inline was because the anchors were being rendered.

By default, anchors are inline elements, hence they are rendered as display:inline;

By default, an LI is rendered as display:list-item; which generates a principal block box and a marker box.
Block boxes (other than inline-block) will stack one upon another.

Quote:

Thanks, but that's called a copy and paste error.
It doesn't answer the behavior I'm seeing.

If you are still seeing them appear beside each other then you have either floated them or set them as display:inline; via CSS.

An un-styled UL will stack as seen in your second description
Code HTML4Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Display:list-item</title> </head> <body> <ul id="nav"> <li><a href="#">Men's</a></li> <li><a href="#">Women's</a></li> <li><a href="#">Boys'</a></li> <li><a href="#">Girls'</a></li> </ul> </body> </html>
Feb 26, 2011, 19:42
Rayzur

Quote:

...and those incomplete list items were not being rendered. The reason they appeared inline was because the anchors were being rendered.

I know you said it was a typo, but actually the browsers were rendering them all as blocks even when the closing </li> was missing on the lower three. They must have been self closing the LI.

You must have styles applied to them if they are sitting beside one another.
Feb 26, 2011, 19:51
DoubleDee

Quote:

Originally Posted by Rayzur

I know you said it was a typo, but actually the browsers were rendering them all as blocks even when the closing </li> was missing on the lower three. They must have been self closing the LI.

That was my guess.

Yes, it was a posting type-o.

Quote:

You must have styles applied to them if they are sitting beside one another.

It is the float: left; that causes the side by side.

I knew that in retrospect.

Told you I was being dumb!

Thanks,

Debbie
Feb 26, 2011, 20:09
DoubleDee

Rayzur,

So if I have a nested list like this...

Code:

<ul id="nav"> <li><a href="#">Men's</a></li> <ul> <li><a href="#">Suits</a></li> <li><a href="#">Shirts</a></li> <li><a href="#">Ties</a></li> </ul> </li> <li><a href="#">Women's</a> <ul> <li><a href="#">Dresses</a></li> <li><a href="#">Coats</a></li> <li><a href="#">Lingerie</a></li> </ul> </li> </ul>

and because I have float: left; on the out list, but no styling on the inner list then I get somethings that looks like this...

Code:

Men's Women's Suits Dresses Shirts Coats Ties Lingerie

That is because the float puts them in the same line and the "block" effect makes the inner list sit on a new line for each item, right?

Debbie
Feb 26, 2011, 20:12
r937

that code is just for demonstration purposes with regard to the LI behaviour, right?

i mean, you don't actually send all those links to href="#", do you?
Feb 26, 2011, 20:18
DoubleDee

Quote:

Originally Posted by r937

that code is just for demonstration purposes with regard to the LI behaviour, right?

i mean, you don't actually send all those links to href="#", do you?

Yes, that is an academic example.

I do use "#" while I'm getting my CSS to work.

Debbie
Feb 27, 2011, 07:08
AtSea webdesign

to display horizontally use

Code:

display:inline

for vertical use

Code:

display: block