CODEWITHSUNDEEP
htmlcssnested-lists
Tristanisginger
Tristanisginger

Reputation: 2683

HTML CSS how do I underline every li in a nested list

Based on w3c the correct way in HTML for a nested list is.

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

However I want a border at the bottom of each item in the list, the following code underlines them all but Tea.

li {
    border-bottom: 1px solid purple;
}

Any suggestions?

Upvotes: 5

Views: 17105

Answers (7)

Jean Paul
Jean Paul

Reputation: 912

Give it a class add add display: inline-block so:

  <ul>
    <li>
      <ul>
          <li class="underline">
             Some stuff here
          </li>
      </ul>
   </li>
  </ul>

and in your css:

.underline {
     display: inline-block;
     border-bottom: 1px #CCCCCC solid;
}

Upvotes: 1

Tristanisginger
Tristanisginger

Reputation: 2683

There are different ways to solve it, I went with this.

li {
    border-bottom: 1px solid purple;
}

li > ul > li:first-child {
    border-top: 1px solid purple;
}

li > ul > li:last-child {
    border: none;
}

Upvotes: 0

Hoytman
Hoytman

Reputation: 1812

This problem is caused by the fact that the "Tea" li tag contains not just 'Tea', but every other ul and li tag pair except for the one containing "Milk". The "Tea" li is getting underlined, which is actually appearing under the 'Green Tea' underline (if you look closely, you should notice a double underline there, especially if you add padding to you li tags.) Your best bet in this situation (if you are building the list programmatically) is to wrap the li items in another tag:

<ul>
  <li><span>Coffee</div></li>
  <li><span>Tea</span>
    <ul>
    <li><span>Black tea</span></li>
    <li><span>Green tea</span></li>
    </ul>
  </li>
  <li><span>Milk<span></li>
</ul>

then change your code to:

li span{
    border-bottom: 1px solid purple;
}

This will ensure that the text gets underlined, and not the li tag containing the text.

Edit:=====================

This is the same thing that Mr Green is recommending in his comment

Upvotes: 1

Pete
Pete

Reputation: 58432

if you mean border bottom on everything you will need to do something like this:

li {
    border-bottom: 1px solid purple;
}

li > ul {
    border-top: 1px solid purple;
}

li > ul > li:last-child {
    border: none;
}

Example
Alternative
Same length lines (but you'll have to find a way to indent the second level bullets)

Otherwise just use text-dexoration

Upvotes: 4

Mr_Green
Mr_Green

Reputation: 41832

As everyone above mentioned that the border actually exists for text "Tea" which is at very bottom because li element has display: list-item assigned by default. You can make it visible by using display: inline but keep in mind that you will lose the features of li element such as list-style-type because they are only applicable for display: list-item. 

li {
    border-bottom: 1px solid purple;
    display: inline;
}
li:after {
    content:"";
    display: block;
}

Working Fiddle

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115061

The "Tea" li DOES have a border it's just 'masked' by the border of the last submenu li

See JSfiddle

li {
    border-bottom:3px solid red;
}

li ul li {
    border-bottom:3px solid green;
}

Upvotes: 2

GolezTrol
GolezTrol

Reputation: 116110

Maybe you can use 

text-decoration: underline

This applies to the text in the element.

Your problem is that the li containing tea actually does have a border, but it's a bottom border, so it is below the nested li.

Instead of using text-decoration you can also wrap the text in another element (span or div) inside the li elements, and apply the border to that. Such a solution using div is especially useful if you want the border to be the full width of the element instead of the text alone.

Upvotes: 3

Related Questions