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?
-
1Hard 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.– JawadDec 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.– kinakutaDec 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!– JawadDec 18, 2012 at 18:24
10 Answers
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>
-
23You can remove the indents and keep the numbering/bullets by: ul { list-style-position: inside; padding-left: 0;}– MyforwikJun 29, 2014 at 22:32
-
5Well, 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– JpsyMar 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>
– j08691Jan 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
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; }
-
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– JpsyJul 31, 2015 at 15:30
-
2So 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?– F30Sep 7, 2016 at 11:45
-
-
3Only 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. May 26, 2022 at 18:29
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
-
7On <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.– JpsyOct 6, 2014 at 8:54
display:table-row;
will also get rid of the indentation but will remove the bullets.
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;
-
1
-
13
-
@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– naeluhDec 10, 2013 at 22:23
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.
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.
Doing this inline, I set the margin to 0 (ul style="margin:0px"). The bullets align with paragraph with no overhang.
-
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
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;
}
}