Question

我知道这应该是HTML / CSS 101，但我遇到了一个我不明白的奇怪问题。我正在更新一个包含大量无序列表的旧网站。事实证明，只要padding设置为0，无序列表的显示“标记”就会消失。

问题是我正在删除的CSS设置*{padding: 0; margin: 0;}，每Chris Coyier notes, "No Longer Cool".

所以这是我的问题。为什么padding: 0会导致无序列表'标记'的显示消失？

<div> List of Stuff:
    <ul class="circle" >
         <li>Apples</li>
         <li>Bumblebees </li>
         <li>Cats</li>
         <li>Dogs</li>
    </ul>
</div>

CSS：

ul {
    list-style-type: none;
    list-style-position: outside;
    padding: 0;    
    margin: 0px; 
}

ul li {
     background-repeat: no-repeat; 
     background-position: 0px center; 
     padding-left: 15px; 
}

ul.disc{
    list-style-type: disc;
}

ul.circle {
    list-style-type: circle;
}

ul.square {
    list-style-type: square;
}

ul.gray_quad li{
    list-style-image: url("./includes/images/gray_quad.gif")
}

ul.yellow_quad li{
    list-style-image: url("./includes/images/yellow_quad.gif")
}

Answer 1

使用list-style-position: outside，列表标记位于列表项框之外。无序列表元素上的填充本身会偏移列表项，以便可以看到标记。这通常实现为padding-left的浏览器默认值，非零值。清零填充会导致列表项框本身（包含文本内容）与无序列表框对齐，从而隐藏列表标记。

样式无序列表和填充时的怪异：0

1 个答案: