如何删除列表边距？

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

只需将 padding 设置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

这应该工作

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>