Unordered List

**DoubleDee** · Feb 26, 2011 18:18

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...

Men's Women's Boys' Girls'

And not like this...

Men's
Women's
Boys'
Girls'

Debbie

**SpacePhoenix** · Feb 26, 2011 19:10

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

**DoubleDee** · Feb 26, 2011 19:13

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

**Rayzur** · Feb 26, 2011 19:21

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.

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>

**Rayzur** · Feb 26, 2011 19:42

...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.

**DoubleDee** · Feb 26, 2011 19:51

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.

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

**DoubleDee** · Feb 26, 2011 20:09

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

**r937** · Feb 26, 2011 20:12

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?

**DoubleDee** · Feb 26, 2011 20:18

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

**AtSea webdesign** · Feb 27, 2011 07:08

to display horizontally use

Code:

display:inline

for vertical use

Code:

display: block

User Tag List

Thread: Unordered List

Thread Tools

Display

Unordered List

Bookmarks

Bookmarks

Posting Permissions