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

User · Accepted Answer

Set the list style and left padding to nothing.

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

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

User · Answer

Doing this inline  I set the margin to 0  ul style  margin -0px    The bullets align with paragraph with no overhang

User · Answer

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

User · Answer

My preferred solution to remove  lt ul  indentation is a simple CSS one-liner    x000D   x000D  ul   padding-left  1 2em    x000D   lt p gt A leading line of paragraph text lt  p gt  x000D   lt ul gt  x000D       lt li gt Bullet points align with paragraph text above  lt  li gt  x000D       lt li gt 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   lt  li gt  x000D       lt li gt List item 3 lt  li gt  x000D   lt  ul gt  x000D   lt p gt A trailing line of paragraph text lt  p gt  x000D   x000D   x000D    This solution is not only lightweight  but has multiple advantages    It nicely left-aligns  lt ul  s bullet points to surrounding normal paragraph text    indenting of  lt ul  removed   The text blocks within the  lt 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

User · Answer

Remove the padding   padding-left  0

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[html] How to remove indentation from an unordered list item?

Examples related to html

Examples related to css