用了overflow:hidden 会影响 list-style，即当ul 中的li 的overflow 为hidden的时候，list-style不起作用，不显示前面的点、圈等样式，在ul或li内加入样式：list-style-position: inside; 即可
在网页布局和设计中，`<li>`（列表项）元素是HTML中用于创建无序列表（`<ul>`）和有序列表（`<ol>`）的基本构建块。它们通常带有默认的点状或数字样式，这些样式由`list-style`属性控制。然而，当我们在`<li>`元素上应用`overflow:hidden`时，可能会遇到一个常见的问题，即列表项的默认点或圈等样式不再显示。这是因为`overflow:hidden`属性的作用是隐藏超出元素边界的任何内容，这同时也会影响到`list-style`。
`list-style`属性允许我们设置列表项的显示方式，包括项目符号类型、图片以及项目符号的位置。例如：
- `disc`：显示实心圆，这是默认值。
- `circle`：显示空心圆。
- `square`：显示实心方块。
- `decimal`：显示阿拉伯数字。
- `lower-roman`和`upper-roman`：分别显示小写和大写罗马数字。
- `lower-alpha`和`upper-alpha`：分别显示小写和大写英文字母。
- `none`：不显示任何项目符号。
除了这些基本类型外，还有一些更复杂的列表样式，如亚美尼亚、乔治亚、希伯来、希腊、日语等语言的数字或字符，以及使用图像作为项目符号的`list-style-image`属性。
当`overflow:hidden`与`list-style`结合使用时，项目符号被隐藏是因为默认情况下，项目符号位于元素的外部（`list-style-position: outside`）。这意味着项目符号会出现在元素的边界之外。由于`overflow:hidden`切断了超出元素边界的任何内容，项目符号因此被隐藏。
解决这个问题的方法是在`<ul>`或`<li>`元素中添加`list-style-position: inside;`。这样，项目符号将被放置在元素内部，即使应用了`overflow:hidden`，它们也不会被裁剪。但是，这种方法可能会影响元素的内边距（`padding`），因为项目符号现在会占用内部空间，所以可能需要调整`padding`值以达到理想的布局效果。
总结来说，`overflow:hidden`对`list-style`的影响是由于`list-style-position`的默认设置。通过改变`list-style-position`为`inside`，可以确保列表项的样式在应用`overflow:hidden`后依然可见。在调整布局时，记得考虑元素的`padding`和整体视觉效果，以确保列表项仍然易于阅读和理解。
