Unordered List

HTML & CSS
1

Dumb question for the day…

If I have an unordered list like this…


<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

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

3

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

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

Debbie

4

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

<!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>
5

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

6

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

7

Rayzur,

So if I have a nested list like this…


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


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

8

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?

9

Yes, that is an academic example.

I do use “#” while I’m getting my CSS to work.

Debbie

10

to display horizontally use


display:inline

for vertical use


display: block