styling a nested list in CSS

Question

According to this well-rated SO post Proper way to make HTML nested list? the best-practice way to make a nested list is this:

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li> </ul>

however I'm having real problems styling a list made in this way. I want each item in the list to have a specific height but I can't use li { height: 40px; } because the height of the second li also includes all the inner list. See here for an example http://jsfiddle.net/rujg3zyk.

The problem comes down to the fact that the second outer li element contains both some plain text and a block display element. This seems like a 'code smell' to me.

what's the best way of formatting this list so that each line is 40px high?

Just use a min-height instead? http://jsfiddle.net/rujg3zyk/5/ — CBroe, Jun 18 '18 at 08:42

score 2 · Answer 1 · answered Jun 18 '18 at 08:42

The way you have given here, is not a valid syntax:

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <!-- Problem here... -->
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

You cannot nest <ul> directly under <ul> in this case. You need to do is:

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    </li>
    <li>Final list item</li>
</ul>

And the above code is perfectly valid. You don't need to use a height but try using min-height. I strongly advice you against using height (as that has to be calculated by the contents).

sorry, as soon as I posted it, I realised I had copied the incorrect sample :( — Andy, Jun 18 '18 at 09:46

score 2 · Accepted Answer · answered Jun 18 '18 at 08:54

Apply line-height instead of height

ul li {
  background-color:yellow;
  line-height:40px;
}

ul li li {
 background-color:red;
 line-height:40px;
}

height:40px will apply 40px for all the listed items, so that two clild 'li' wont fit inside the 40px of the parent 'li'

score 0 · Answer 3 · answered Jun 18 '18 at 08:48

Your code Your code :

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li> 
</ul>

is correct you need some changes read below:

The nested list should be inside a <li> element of the list in which it is nested.

Link to the W3C Wiki on Lists (taken from comment below): HTML Lists Wiki.

Link to the HTML5 W3C ul spec: HTML5 ul. Note that a ul element may contain exactly zero or more li elements. The same applies to HTML5 ol. The description list (HTML5 dl) is similar, but allows both dt and dd elements.

More Notes:

dl = definition list.
ol = ordered list (numbers).
ul = unordered list (bullets).

score 0 · Answer 4 · answered Jun 18 '18 at 09:22

I don't know if this is what you are looking for, but you could use min-height instead of height:

ul li {
  background-color:yellow;
  min-height: 40px;
}

ul li li {
  background-color:red;
}

<ul>
  <li>List item one</li>
  <li>List item two with subitems:
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Final list item</li>
</ul>

Of course, it could expand to higher heights if there is more content, so that is why I am not sure if that is what you are looking for.

Hope this helps.

this is closer but still not quite what I wanted because the text "List item two with subitems" is not in its own 40px high "box". the line-height solution seems to give exactly what I was looking form. — Andy, Jun 18 '18 at 09:51

styling a nested list in CSS

4 Answers4

Linked