如何刪除列表邊距？

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

在樣式表上使用此代碼。它將重置所有元素的默認邊距和填充。

希望它能起作用。