Menu
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.
466
Indented lists provide additional information to users by displaying levels within a relationship, such as an email conversation thread. Viewing a list in the indented hierarchy makes it easier to understand the email order in a family.
Definition and Usage The text-indent property specifies the indentation of the first line in a text-block. Note: Negative values are allowed. The first line will be indented to the left if the value is negative.
Indent the first line of a paragraph with text-indentPixels (px), em, rem, even percentage (%) units will work. Using a relative unit like percentage will change the amount of indentation based on the width of the webpage.
For Indenting, yes, by all means use CSS - but not for Tab Characters. For a single Tab, I would replace with " " (4 Spaces).
Yes, simply use something like:
ul {
padding-left: 10px;
}
And it will bump each successive ul by 10 pixels.
Working jsFiddle
146
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/
42
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;
}
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! =)
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
