How to remove list margin?

Question

I have a list that contains 3 items. However, it has a little margin on its left side, I want it to disappear.

Here is my code:

相关标签:

Answer 1

This should work

ul {
    display: inline;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
        
li{
    display: inline;
}

<ul>
    <li>I have margin space on my left side</li>
    <li>List 2</li>
    <li>List 3</li>
</ul>
<p>
    Hi! I am a text without any margin!
</p>

Answer 2

Just set padding of your ul to 0. Here's a snippet:

ul {
    padding: 0;
}

ul li {
  display: inline;
  list-style: none;
}

<ul>
  <li>Hey, now I don't have extra space on my left side!</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
<p>
Hi! I am a text without any margin!
</p>

Answer 3

You can set a global style rule, like so:

* {padding:0; margin:0;} 

Use this code on top of your style sheet. It will reset default margin and padding for all elements.

Hope it will work.

Answer 4

It's the browser default and you have to reset the padding for the ul element.

If you look at the chrome dev tool, you can see the browser defaults as below.

Code

ul {
  padding-left: 0;
}

ul li {
  display: inline;
  list-style: none;
  margin-left: 0;
}

<ul>
  <li>I have margin space on my left side</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
<p>
Hi! I am a text without any margin!
</p>

Answer 5

You need to reset ul margin and padding to zero (0)

ul {
  padding: 0;
  margin: 0;
}

ul li {
  display: inline;
  list-style: none;
}

<ul>
  <li>I have margin space on my left side</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
<p>
Hi! I am a text without any margin!
</p>