使用Tailwind为<ul>添加overflow-scroll后项目符号消失的原因？

原因 #

HTML列表的项目符号（list-disc）默认是绘制在元素内容框外部的。当你给<ul>添加overflow-y-auto/overflow-y-scroll并设置固定高度h-80时，容器的溢出裁剪规则会把位于外部的项目符号切掉，导致符号消失。

解决方法 #

有两种简单的修复方式：

• 方法一：将项目符号移到内容框内部
  使用Tailwind的list-inside工具类，让符号绘制在元素内容区域内，避免被overflow裁剪：

  <ul className="list-disc list-inside overflow-y-auto h-80 space-y-3 text-sm w-full sm:text-md items-start">
    {experience.points.map((point, i) => (<li key={i}>{point}</li>))}
  </ul>
  

• 方法二：给容器添加左侧内边距
  给<ul>增加左侧内边距，留出足够空间显示外部的项目符号，比如添加pl-5（可根据实际需求调整内边距数值）：

  <ul className="list-disc overflow-y-auto h-80 space-y-3 text-sm w-full sm:text-md items-start pl-5">
    {experience.points.map((point, i) => (<li key={i}>{point}</li>))}
  </ul>
  

内容的提问来源于stack exchange，提问作者JPW