如何删除列表边距？

Question

我有一个包含3个项目的列表。但是，它的左侧有一点余量，我希望它消失。

这里是我的代码：

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>

Answer 1

只需设置你的ul为0。这里的填充是一个片段：

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 2

您需要重置ulmargin和padding为零（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>

Answer 3

这应该工作

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 4

这是browser default并且您必须resetpadding为ul元素。

如果你看看chrome dev tool，你可以看到浏览器默认如下。

代码

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

您可以设置一个全球性的样式规则，像这样：

* {padding:0; margin:0;} 

在样式表上使用此代码。它将重置所有元素的默认边距和填充。

希望它能起作用。