311

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?

3
  • 1
    Hard to say with out your HTML & CSS but using a CSS Reset/Normalize consisting of rules ul{padding: 0; margin: 0;} does the trick in most cases. I am sure text-indent has nothing to do with it.
    – Jawad
    Dec 18, 2012 at 18:17
  • Without seeing what you're actually doing, it's difficult to say what the problem is. Setting both margin and padding on the ul to 0 should work cross-browser.
    – kinakuta
    Dec 18, 2012 at 18:20
  • 6
    "Didn't work. And can't use CSS reset. My changes are part of a giant web framework with over 60 people working on it haha" - Haha indeed. Than you have not asked your question clearly!
    – Jawad
    Dec 18, 2012 at 18:24

10 Answers 10

502

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>

7
  • 23
    You can remove the indents and keep the numbering/bullets by: ul { list-style-position: inside; padding-left: 0;}
    – Myforwik
    Jun 29, 2014 at 22:32
  • 5
    Well, now that you edited your answer the bullets are maintained, but there is still the problem that <li>s with multiple text lines don't correctly indent all lines. It you keep on editing you may finally end up with my solution. :D
    – Jpsy
    Mar 15, 2015 at 13:22
  • The second solution that keeps the bullet doesn't seem to work anymore (Chrome 55 on Windows). Any alternatives? Jan 20, 2017 at 20:14
  • 2
    @TomPažourek Try list-style-position: outside; padding-left: 1em; on the <ul>
    – j08691
    Jan 20, 2017 at 20:20
  • 2
    @j08691: Yeah, that works, although the 1em thing is a bit of a magical value... And there's actually still a tiny bit of indentation left. Jan 20, 2017 at 20:25
105

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; }
5
  • I explained all problems already in my posting, @aioobe. But here again: The accepted answer (status as of now, because after my original posting it has been edited multiple times to improve it) now maintains the bullets (if you use the second example given), but it does not correctly indent bulleted multiline text. Here is the fiddle of the second example of the accepted answer, modified to show the effect: jsfiddle.net/v6nyuq6f/88 And here is the same fiddle corrected with my approach: jsfiddle.net/v6nyuq6f/89
    – Jpsy
    Jul 31, 2015 at 15:30
  • 2
    So it's 2016 and relying on some value which is "not perfect for all browsers" is the cleanest solution for this pretty common problem. Is there any way to get the exact width of the item symbol, maybe using CSS3 features?
    – F30
    Sep 7, 2016 at 11:45
  • Just to be safe: ul { padding-left:1.2em; margin-left: 0; } Jan 29, 2019 at 16:44
  • 3
    Only solution on this page, that works correctly with long list items (wrap around correctly) - Thanks! Nov 21, 2019 at 12:06
  • A very nice solution. As simple as it can be (I love simple). I found that it does not seem to work as an inline style; but worked fine as shown in the answer.
    – Betty Mock
    May 26, 2022 at 18:29
10

Add this to your CSS:

ul { list-style-position: inside; }

This will place the li elements in the same indent as other paragraphs and text.

Ref: http://www.w3schools.com/cssref/pr_list-style-position.asp

1
  • 7
    On <li>s with multiple text lines, list-style-position: inside aligns the text of the second and all following lines with the bullet. This is surely not desirable.
    – Jpsy
    Oct 6, 2014 at 8:54
10

display:table-row; will also get rid of the indentation but will remove the bullets.

7

Remove the padding:

padding-left: 0;
0
4

Can you provide a link ? thanks I can take a look Most likely your css selector isnt strong enough or can you try

padding:0!important;

3
  • 1
    Dimensions are not needed when specifying 0.
    – raam86
    Dec 18, 2012 at 18:18
  • 13
    !important is EVIL
    – Madbreaks
    Dec 10, 2013 at 0:33
  • @Madbreaks It can work if the selector is the correct one and use case is correct but your right prob not this one, maybe in this case there is a main css rule that needs to be overridden with changing the base file, so it left in tack like not hacking core ? I dont know maybe I'm wrong
    – naeluh
    Dec 10, 2013 at 22:23
4

Live demo: https://jsfiddle.net/h8uxmoj4/

ol, ul {
  padding-left: 0;
}

li {
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}

li::before {
  left: 0;
  position: absolute;
}

ol {
  counter-reset: counter;
}

ol li::before {
  content: counter(counter) ".";
  counter-increment: counter;
}

ul li::before {
  content: "●";
}

Since the original question is unclear about its requirements, I attempted to solve this problem within the guidelines set by other answers. In particular:

  • Align list bullets with outside paragraph text
  • Align multiple lines within the same list item

I also wanted a solution that didn't rely on browsers agreeing on how much padding to use. I've added an ordered list for completeness.

4

I have the same problem with a footer I'm trying to divide up. I found that this worked for me by trying few of above suggestions combined:

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

This seems to keep it to the left under my h1 and the bullet points inside the div rather than outside to the left.

2

Doing this inline, I set the margin to 0 (ul style="margin:0px"). The bullets align with paragraph with no overhang.

2
  • I don't understand why you were down-voted other than the negative sign in front of a zero. I tried this on Google Chrome and it worked, whereas the padding-left: 0 solution did not. This is on Google Chrome Version 79.0.3945.88 WinX, 64 bit. Dec 31, 2019 at 22:37
  • Adding to my comment above... since I can't edit it... I played with this a bit more, and on the latest Firefox (71.0), the behavior is the same. However, this is with unordered lists (ul). When using ordered lists (ol), 1.2em seems to align the left edge of the list with the left margin of other text (per Jpsy answer above). Dec 31, 2019 at 23:05
0

The following worked for me. In Chrome, Edge and Firefox (which needs special treatment). Bullets are kept and are on the same line with surrounding paragraphs.

ul {
  padding-left: 0;
  margin-left: 17px;
}

/* Different value for Firefox */
@-moz-document url-prefix() {
  ul {
    margin-left: 14px;
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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