li样式不显示使用overflow:hidden导致Li前面点、圈等样式不见

这个问题通常出现在给<ul>或者<ol>元素设置了一个宽度，然后想在其中的<li>元素中显示特定的样式，但是发现点、圈等样式不显示出来，只显示了一个空白。

其中原因是，当<li>元素的宽度超出了<ul>或<ol>元素的宽度时，<li>元素会溢出，而溢出的部分不会显示任何样式，因此圆点或数字也会被隐藏掉。

为了解决这个问题，可以考虑使用一些技巧来使元素相对定位，然后使用overflow: hidden属性来重新定义样式。

以下是两个示例说明：

示例1：使用相对定位和overflow属性

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

为了显示圆点，我们需要将<li>元素相对定位，并调整它们的左侧位置，使得圆点可以显示出来。

ul {
  overflow: hidden;
  list-style: none;
}

li {
  position: relative;
  left: -25px; /* 圆点的宽度 */
}

这里我们将<ul>元素的overflow属性设置为hidden，这样当<li>元素溢出时，会被<ul>元素隐藏。同时使用list-style: none属性来隐藏原生样式。

然后我们将<li>元素设置为相对定位，并将它们的左侧位置移动了圆点的宽度，这样圆点就会显示出来了。

示例2：使用padding-left属性

另外一个解决方法是使用padding-left属性来给<li>元素添加左侧的空白。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

ul {
  overflow: hidden;
  list-style: none;
}

li {
  padding-left: 25px;
}

这里我们也是将<ul>元素的overflow属性设置为hidden，同时使用list-style: none属性来隐藏原生样式。

然后在<li>元素中使用padding-left属性来添加左侧空白，同时将值设置为圆点或数字的宽度，这样圆点或数字就会显示出来了。

这些是两个比较常用的解决方案，可以根据实际情况选择其中的一种来解决样式问题。