Question

我正在尝试在angular项目中使用此聊天片段。关键是我不能包含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;
}

如何删除由于项目符号点而出现的左侧多余边距？

Answer 1

添加到ul list-style-type:none

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

Answer 2

如何解决此问题

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

#contacts ul {
    padding: 0px;
}

将上述代码添加到样式表中即可解决此问题。

为什么会发生

之所以需要额外的填充，是因为在所有ul, menu, dir元素共有的样式表中添加了以下属性。

padding-inline-start: 40px;

Answer 3

添加此CSS，它将解决您的问题。

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

<ul>和<li>无法解决此问题

3 个答案: