33

I'm new to CSS and working with list. I tried using one of the code I saw on w3schools which shows how to indent lists:

<html>
<body>

<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

My css is overriding it so it all apears on the same vertical line. Is there any CSS code I could use locally on the list to override the main css file? Any help would be appreciated.

1
  • 2
    @BoltClock: Based on his questions specification, I think he meant to ask on how to override the main css, locally. In that case his main css is irrelevant, but if its not the case, then yes. Aug 8, 2011 at 17:32

7 Answers 7

37

Yes, simply use something like:

ul {
  padding-left: 10px;
}

And it will bump each successive ul by 10 pixels.

Working jsFiddle

2
  • 1
    This code give padding to the first ul as well, so a class should be defined and added to the list which needs indent
    – smrf
    Oct 23, 2019 at 8:31
  • 5
    You can just use ul ul if you want it from the second level and down. Oct 23, 2019 at 9:01
14

It sounds like some of your styles are being reset.

By default in most browsers, uls and ols have margin and padding added to them.

You can override this (and many do) by adding a line to your css like so

ul, ol {  //THERE MAY BE OTHER ELEMENTS IN THE LIST
    margin:0;
    padding:0;
}

In this case, you would remove the element from this list or add a margin/padding back, like so

ul{
    margin:1em;
}

Example: http://jsfiddle.net/jasongennaro/vbMbQ/1/

11

I solved the same problem by adding text-indent to the nested list.

<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul id="list2">
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

#list2
{
 text-indent:50px;
}
1
  • 1
    a better solution would be to avoid using id or class in the markup and do this strictly with css. margin or padding are a better choice.
    – Octopus
    Jul 13, 2013 at 7:14
3

Normally, all lists are being displayed vertically anyways. So do you want to display it horizontally?

Anyways, you asked to override the main css file and set some css locally. You cannot do it inside <ul> with style="", that it would apply on the children (<li>).

Closest thing to locally manipulating your list would be:

<style>
    li {display: inline-block;}
</style>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
        <li>Black tea</li>
        <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
2
  • I highly doubt he wanted horizontal items seeing as he asks about indenting the lists. Aug 8, 2011 at 17:22
  • Same, but its meant as an example on local css. I highly doubt that, he wanted to set padding-left: 10px; too..? Aug 8, 2011 at 17:26
3

You can use [Adjacent sibling combinators] as described in the W3 CSS Selectors Recommendation1 So you can use a + sign (or even a ~ tilde) apply a padding to the nested ul tag, as you described in your question and you'll get the result you need. I also think what you want it to override the main css, locally. You can do this:

<style>
    li+ul {padding-left: 20px;}
</style>

This way the inner ul will be nested including the bullets of the li elements. I wish this was helpful! =)

0
3

You can also use html to override the css locally. I was having a similar issue and this worked for me:

<html>
<body>

<h4>A nested List:</h4>
<ul style="PADDING-LEFT: 12px">
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>
2

li {
  padding-left: 30px;
}
<p>Some text to show left edge of container.<p>
<ul>
  <li>List item</li>
</ul>
The above will add 30px of space between the bullet or number and your text.

li {
  margin-left: 30px;
}
<p>Some text to show left edge of container.<p>
<ul>
  <li>List item</li>
</ul>
The above will add 30px of space between the bullet or number and the left edge of the container.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.