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

Question

我知道这应该是 HTML/CSS 101 但我运行遇到了一个我不明白的奇怪问题。我正在更新一个旧站点，其中有很多无序列表。原来只要padding为0，无序列表的显示'marker'就消失了

问题是 CSS 设置 *{padding: 0; margin: 0;}，我现在根据 Chris Coyier notes, "No Longer Cool".

将其删除

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

<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

Weirdness while styling unordered lists and padding: 0

html

css

html-lists