如何删除列表边距？答案

【问题标题】：How to remove list margin?如何删除列表边距？
【发布时间】：2017-04-03 05:48:03
【问题描述】：

我有一个包含 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>

【问题讨论】：

使用浏览器的开发工具找出它的应用位置（它来自浏览器样式表） - 然后在您的样式表中覆盖它。

标签： html css

【解决方案1】：

这应该可以工作

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>

【讨论】：

【解决方案2】：

只需将ul 的填充设置为 0。这是一个 sn-p：

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>

【讨论】：

【解决方案3】：

您需要将 ul margin 和 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>

【讨论】：

【解决方案4】：

它是browser default，而ul 元素必须是reset padding。

如果您查看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>

【讨论】：

【解决方案5】：

您可以设置全局样式规则，如下所示：

* {padding:0; margin:0;}

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

希望它会起作用。

【讨论】：