CODEWITHSUNDEEP
htmlcss
kofifus
kofifus

Reputation: 19276

CSS align nested list

I have a simple nested list:

ul {
	width:100px;
    list-style-position: outside;
}
ol {
	width:100px;
    list-style-position: outside;
}
<ul class="b">
  <li>Earl Grey Tea - A fine black tea</li>
  <ul class="b">
    <li>Jasmine Tea - A fabulous "all purpose" tea</li>
    <ol class="b">
      <li>English breakfast Tea - A fabulous "all purpose" tea</li>
    </ol>
  </ul>
  <li>Honeybush Tea - A super fruity delight tea</li>
</ul>

I want to align the nested bullets/numbers under the text of the enclosing bullets.

That is I want the bullet before 'Jasmine Tea' to align under the 'E' of 'Earl Grey' above, and the number 1 of 'English breakfast' to align under the 'J' of 'Jasmine Tea'

How can this be achieved ?

(note: I am using list-style-position: outside to align wrapped lines correctly which I need)

Upvotes: 0

Views: 1887

Answers (4)

adriatiq
adriatiq

Reputation: 326

You'd want to make the browser default padding-left of all child ol's and ul's consistent with the position outside spacing

ul {
	width:100px;
    list-style-position: outside;
}
ol {
	width:100px;
    list-style-position: outside;
}
ul ul, ol ol, ul ol, ol ul {
    padding-left: 1em;
}
<ul class="b">
  <li>Earl Grey Tea - A fine black tea</li>
  <ul class="b">
    <li>Jasmine Tea - A fabulous "all purpose" tea</li>
    <ol class="b">
      <li>English breakfast Tea - A fabulous "all purpose" tea</li>
    </ol>
  </ul>
  <li>Honeybush Tea - A super fruity delight tea</li>
</ul>

Upvotes: 0

domsson
domsson

Reputation: 4691

The list markers live within a list's left padding. Hence, that's what you want to adjust:

ul, ol {
  padding-left: 1em;
}
<ul class="b">
  <li>Earl Grey Tea - A fine black tea</li>
  <ul class="b">
    <li>Jasmine Tea - A fabulous "all purpose" tea</li>
    <ol class="b">
      <li>English breakfast Tea - A fabulous "all purpose" tea</li>
    </ol>
  </ul>
  <li>Honeybush Tea - A super fruity delight tea</li>
</ul>

I chose the value of 1em as it relates to the font size, so you've got a good chance that it will put the list approximately in the desired place. Depending on the chosen font (and markers), you might want to slightly adjust this value to suit your particular situation.

Also note that you don't need list-style-position: outside, as outside is the default.

Upvotes: 2

scarsam
scarsam

Reputation: 346

I'm not 100% sure if I understand the question but if you want the to align I would remove the padding-left. I would add a helper class called padding-left-none and then give that class padding-left: 0px;.

HTML

<ul class="b padding-left-none">
<ol class="b padding-left-none">

CSS

.padding-left-none {
  padding-left: 0px;
}

Upvotes: -1

Robert I
Robert I

Reputation: 1527

ul.nudge {
	width:100px;
    list-style-position: outside;
    padding-left:20px;
}
ol.nudge {
	width:100px;
  padding-left:20px;
    list-style-position: outside;
}

ol.small-nudge {
	width:100px;
  padding-left:15px;
    list-style-position: outside;
}
<ul class="b">
  <li>Earl Grey Tea - A fine black tea</li>
  <ul class="nudge">
    <li>Jasmine Tea - A fabulous "all purpose" tea</li>
    <ol class="small-nudge">
      <li>English breakfast Tea - A fabulous "all purpose" tea</li>
    </ol>
  </ul>
  <li>Honeybush Tea - A super fruity delight tea</li>
</ul>

Upvotes: 0

Related Questions