styling a nested list in CSS

问题

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?

回答1:

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'

回答2:

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

回答3:

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

回答4:

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.

来源：https://stackoverflow.com/questions/50905586/styling-a-nested-list-in-css

标签

css

html-lists