无法解决 <ul> 和 <li> 的问题答案

【问题标题】：Can't fix the issue with <ul> and <li>无法解决 <ul> 和 <li> 的问题
【发布时间】：2018-10-26 21:51:45
【问题描述】：

我正在尝试在 Angular 项目中使用这个聊天 sn-p。关键是我不能包含 jquery 部分，所以我只需要它的 HTML 和 CSS 部分。这是原始的： https://bootsnipp.com/snippets/exR5v

我在 Codepen 上复制了它，聊天列表中每个用户的左侧都有项目符号。我还加了list-style-type:none;

但它只是删除了项目符号点，并且留下了额外的边距而不是项目符号。这是我的示例的链接：https://codepen.io/artyombaykov/pen/pxGyjY 我在这部分进行了更改以删除项目符号：

#frame #sidepanel #contacts ul li.contact {
  position: relative;
  padding: 10px 0 15px 0;
  font-size: 0.9em;
  cursor: pointer;
  list-style-type:none;
}

如何删除因项目符号而出现的左侧额外边距？

【问题讨论】：

sn-p 不使用 Bootstrap 并且不引用 Bootstrap 类。
removing ul indent with CSS的可能重复

标签： html twitter-bootstrap css bootstrap-4

【解决方案1】：

如何解决这个问题

将#contacts 内的ul 元素的样式覆盖为0 或0px。

#contacts ul {
    padding: 0px;
}

将上述代码添加到您的样式表将解决此问题。

为什么会发生这种情况

这个额外的填充是因为在所有ul, menu, dir元素通用的样式表中添加了以下属性。

padding-inline-start: 40px;

【讨论】：

【解决方案2】：

添加这个 css，它会解决你的问题。

#frame #sidepanel #contacts ul {
    padding-left: 0px;
}

【讨论】：

【解决方案3】：

添加到ul list-style-type:none

#frame #sidepanel #contacts ul {
  list-style: none;
  padding: 0;
}

【讨论】：