Indent List in HTML and CSS

user_875032 0
Viewed 138980

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.

css html
7 Answers

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>
user_53774950 

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.

user_72338540
Related