Question

我使用通用选择器（*）重置页面上的CSS。

我无法弄清楚如何将子弹（列表样式类型）恢复到li项目上

我尝试在重置后将display: list-item;添加到li选择器中，但这不起作用。

我认为可能是由于特异性，但是即使添加了!important关键字，它仍然无法正常工作。

我在下面添加了我的测试选择器，以显示我尝试过的内容，但已将其注释掉。

我在这里树错树了吗？

有人可以帮助我了解如何实现这一目标吗？

* {
  padding: 0;
}
/*
ul {
  list-style: circle;
}
li{
  display: list-item !important;
  padding-left: 30px;
}
*/

<ul>
  <li>web development (server-side),</li>
  <li>software development,</li>
  <li>mathematics,</li>
  <li>system scripting.</li>
</ul>

Answer 1

使用list-style-position属性并将其设置为inside。
然后，填充不会影响它。

* {
  padding: 0;
}

ul {
  /* if you want the standard bullets, use 'disc' instead of 'circle' */
  list-style: circle;
  list-style-position: inside;
}

<ul>
  <li>web development (server-side),</li>
  <li>software development,</li>
  <li>mathematics,</li>
  <li>system scripting.</li>
</ul>

Answer 2

谢谢@NullDev为我工作。

我还发现，如果我在padding-left元素上设置ul（而不是像我之前那样在li元素上设置），那么它也会正常工作

我已经在寻找答案了将近2个小时。

* {
  padding: 0;
}

ul {
  list-style: circle;
  padding-left: 40px;
}

<ul>
  <li>web development (server-side),</li>
  <li>software development,</li>
  <li>mathematics,</li>
  <li>system scripting.</li>
</ul>

CSS重置后如何恢复列表样式类型（项目符号）

2 个答案: