为什么 overflow-y:hidden of HTML-lists 使项目符号/数字不可见？答案

【问题标题】：Why overflow-y:hidden of HTML-lists makes bullet/number to be invisible?为什么 overflow-y:hidden of HTML-lists 使项目符号/数字不可见？
【发布时间】：2016-12-01 12:39:32
【问题描述】：

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

这是一个简单的示例（关于@Paulie_D answer，我添加了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！

【问题讨论】：

标签： html css html-lists hidden bulletedlist

【解决方案1】：

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

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

检查这张图片：

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

【讨论】：

我知道；但它们在 x 边界之外，没有 y 边界！
... 所以项目符号在列表元素之外。是的，在外面。但在 x 边界之外！我已将overflow-y 设置为hidden。我在我的问题中解释得更好。

【解决方案2】：

根据我的阅读，当您设置 overflow-y:hidden 时，overflow-x computed 值设置为 auto，这是 CSS Spec 的一部分。

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

...和overflow:auto

这个值表示盒子的内容被裁剪到了内边距盒子里。

..由于标记位于 li 之外，因此它被剪裁并隐藏了。

【讨论】：

感谢您提供有用的信息。关于你的回答，我更新了我的问题。
添加overflow-x:visible没关系，它会恢复为auto
所以我接受了你的回答，但现在我的问题是如何改正？
我不确定你可以。目前还不清楚为什么你需要限制溢出。

【解决方案3】：

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

【讨论】：

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