如何删除列表边距？

Question

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

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这应该有效

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

ul {
    padding: 0;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要将ul margin和padding重置为零（0）

＆＃13;

＆＃13;

ul {
  padding: 0;
  margin: 0;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是browser default，您必须reset padding 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

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

app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('shared/error/error', {
    message: err.message,
    error: err
  });
});

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

希望它能奏效。