html - 列表样式类型为 : none; & list-style-position: inside; takes extra space in Firefox 的无序列表

Question

我喜欢让元素符号和编号以适当的方式与整个网站的列表元素中的文本内容垂直对齐。所以我总是把..

ol, ul { list-style-position: inside; }

但是对于要删除元素符号的 ul 部分，我使用..

ul.nobullet { 列表样式类型:无； }

这在 Chrome、Opera 和 Safari 中完美运行。

但是对于 Firefox，简单的 list-style-type: none; 似乎无法正常工作。元素符号按原样消失，但在 li 元素的左侧仍然存在间隙(空间)。我需要向 ul.nobullet 添加额外的 list-style-position: outside; 以消除间隙。

我的问题是，为什么这特别发生在 firefox 中？有什么我遗漏或做错了什么吗？

这是一个示例代码。请注意 Firefox 和 Chrome 中 li 元素和 ul 周围红色边框的空白。

* {
    padding: 0;
    margin: 0;
}

ul {
    list-style-position: inside;
    border: 1px solid red;
}

.box {
    padding: 10px;
    border: 1px solid black;
}    

.nobullet {
    list-style-type: none;
}

<div class="box">
    <div><strong>Library Stats</strong></div>
        <ul class="nobullet">
            <li>line 1</li>
            <li>line 2</li>
            <li>line 3</li>
            <li>line 4</li>
            <li>line 5</li>
        </ul>
</div>

Answer 1

不仅是 Firefox。更正确的方法是删除填充:

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

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

更新:

阅读您的代码，我找到了重点。您在此处设置填充 0:

* {
    padding: 0;
    margin: 0;
}

它会影响您的列表。尝试不删除 padding: 0，您会发现 list-style-position 无法解决您的问题。