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? jsfiddle.net/rujg3zyk/5

C3roe
– C3roe

2018-06-18 08:42:42 +00:00
Commented Jun 18, 2018 at 8:42 — C3roe
– C3roe, Commented Jun 18, 2018 at 8:42

charan kumar · Accepted Answer · 2018-06-18 08:54:33Z

2

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'

answered Jun 18, 2018 at 8:54

charan kumar

2,1662 gold badges21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2018-06-18 08:42:35Z

1

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

answered Jun 18, 2018 at 8:42

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

1 Comment

Andy Over a year ago

sorry, as soon as I posted it, I realised I had copied the incorrect sample :(

Serge Inácio · Accepted Answer · 2018-06-18 09:22:39Z

0

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.

answered Jun 18, 2018 at 9:22

Serge Inácio

1,3809 silver badges29 bronze badges

1 Comment

Andy Over a year ago

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.

Collectives™ on Stack Overflow

styling a nested list in CSS

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related