How to remove indentation from an unordered list item? - html

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; }

Answer 3

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

Answer 4

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

Answer 5

Remove the padding:
padding-left: 0;

Answer 6

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;

Answer 7

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.

Answer 8

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.

Answer 9

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

Answer 10

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;
}
}