2

我将<li>的 CSS 属性设置overflow-y为hidden，然后删除了它的项目符号/编号。为什么？他们的关系是什么？（我该如何纠正它？）

这是一个简单的示例（关于@Paulie_D 答案，我添加了overflow-x:visible）：

li:first-child {
  overflow-y:hidden; 
  overflow-x:visible;
}
<ul>
    <li>Unordered list - Item 1</li>
    <li>Unordered list - Item 2</li>
</ul>
<ol>
    <li>Ordered list - Item 1</li>
    <li>Ordered list - Item 2</li>
</ol>

我在 Firefox v49.x 和 Chrome v54.x 上运行它。

编辑： 由于一些答案，我解释：

在此处输入图像描述

项目符号/数字超出x-bounds，没有y-bounds！

4

3 回答 3

5

默认情况下，项目符号位于列表元素之外overflow-y:hidden;，因此将它们隐藏起来。您可以使用list-style-position: inside;来覆盖默认outside值。

我知道; 但它们在 x 边界之外，没有 y 边界！

检查此图像：

在此处输入图像描述

蓝色框是列表元素的边界框。列表元素之前的空格是父元素ul和ol元素的默认填充。所以项目符号在列表元素之外。

于 2016-12-01T12:43:47.630 回答
1

根据我的阅读，当您设置计算值时，设置为overflow-y:hiddenCSS Spec的一部分。overflow-x auto

计算值：如指定，除非溢出-x 或溢出-y 之一不可见时自动进行可见计算。

...和overflow:auto

该值表示框的内容被裁剪到填充框。

..并且由于标记在外部，li因此被剪裁并隐藏。

于 2016-12-01T13:40:18.790 回答
0

导致无序列表中的项目符号或有序列表中的数字不仅仅是边界框

于 2016-12-01T12:44:22.417 回答