CSS无法从项目符号列表中删除缩进

Question

我正在尝试使用CSS从项目符号列表中删除缩进和项目符号。这是我在做什么：

.entry-content ul{
    list-style-type:none;
    padding:0;}

项目符号点将从列表中删除，但缩进不是固定的。这是HTML：

<div class="entry-content">
     <ul class=wp-block-categories wp-block-categories-list">
          <li class="cat-item cat-item-8"><a href="https://xxx/?cat=8">Advice</a>
          </li>
     </ul>
</div>

这是在应用CSS之前的图像： https://imgur.com/Sw31pHJ

这是我应用CSS后的图片： https://imgur.com/Utnt5vI

有人知道为什么不删除缩进吗？我是在wordpress中进行的。

Answer 1

您可能还需要申请：

.entry-content ul li {
  margin-left: -20px;
}

确切的边距量将根据字体大小而有所不同，但是默认值为20px。

Answer 2

您的HTML错误。

<ul class=:wp-block-categories wp-block-categories-list">

应该是

<ul class="wp-block-categories wp-block-categories-list">

对于您的CSS，最可能是以下之一：

• li可能也有一个margin。尝试.entry-content ul li { margin-left: 0; }
• 您的选择器不够specific，请尝试.entry-content ul.wp-block-categories-list
• 您的ul可能有margin而不是padding（令人怀疑）

您可以尝试使用DevTools /浏览器检查器诊断这些问题，它会向您显示所有位置/边距/填充以及与元素边界框有关的所有内容：