How to remove indentation from an unordered list item?

Question

I want to remove all indentation from ul. I tried setting margin, padding, text-indent to 0, but no avail. Seems that setting text-indent to a negative number does the trick - but is that really the only way to remove the indentation?

Answer 1

Set the list style and left padding to nothing.

ul {     list-style: none;     padding-left: 0; }​ 

ul {    list-style: none;    padding-left: 0;  }

<ul>    <li>a</li>    <li>b</li>    <li>c</li>  </ul>

To maintain the bullets you can replace the list-style: none with list-style-position: inside or the shorthand list-style: inside:

ul {   list-style-position: inside;   padding-left: 0; } 

ul {    list-style-position: inside;    padding-left: 0;  }

<ul>    <li>a</li>    <li>b</li>    <li>c</li>  </ul>

Answer 2

My preferred solution to remove <ul> indentation is a simple CSS one-liner:

ul { padding-left: 1.2em; }

<p>A leading line of paragraph text</p>  <ul>      <li>Bullet points align with paragraph text above.</li>      <li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>      <li>List item 3</li>  </ul>  <p>A trailing line of paragraph text</p>

This solution is not only lightweight, but has multiple advantages:

• It nicely left-aligns <ul>'s bullet points to surrounding normal paragraph text (= indenting of <ul> removed).
• The text blocks within the <li> elements remain correctly indented if they wrap around into multiple lines.

---

Legacy info:
For IE versions 8 and below you must use margin-left instead:

    ul { margin-left: 1.2em; }