whitespace-nowrap下li宽度适配内容及同列宽度统一的CSS/Tailwind实现

核心思路 #

通过CSS Grid布局的特性，让列表项宽度由内容最宽的项自动决定，同时保留父元素的横向滚动功能，完美适配需求。

需求对应解决方案 #

• 让第一个li宽度适配内容：借助grid-template-columns: max-content（Tailwind中通过grid grid-cols-1间接实现，单列Grid默认会拉伸至内容最大宽度），让列表项宽度完全匹配自身内容，不会被父元素的固定宽度截断。
• 其余li与第一个li宽度一致：Grid布局会自动将所有列的宽度统一为容器内最宽项的宽度，后续li会自动对齐第一个li的宽度。
• 保留父元素横向滚动：父元素保留overflow-x-auto，当列表项宽度超过父元素的w-32时，自动显示横向滚动条，不影响内容完整展示。
• 纯CSS/Tailwind均可实现：两种方案都能达成效果，具体代码如下：

Tailwind实现代码

<script src="https://cdn.tailwindcss.com"></script>
<ul class="overflow-x-auto w-32 grid grid-cols-1">
  <li class="bg-blue-50 whitespace-nowrap">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget hendrerit nibh.
  </li>
  <li class="bg-red-50 whitespace-nowrap">foo</li>
  <li class="bg-green-50 whitespace-nowrap">bar</li>
  <li class="bg-orange-50 whitespace-nowrap">baz</li>
</ul>

关键修改：给ul添加grid grid-cols-1，利用Grid布局的自动列宽特性，同时保留父元素的overflow-x-auto和w-32属性。

纯CSS实现代码

<style>
  .scroll-list {
    width: 8rem; /* 对应Tailwind的w-32 */
    overflow-x: auto;
    display: grid;
    grid-template-columns: max-content;
  }
  .scroll-list li {
    white-space: nowrap;
  }
</style>
<ul class="scroll-list">
  <li class="bg-blue-50">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget hendrerit nibh.
  </li>
  <li class="bg-red-50">foo</li>
  <li class="bg-green-50">bar</li>
  <li class="bg-orange-50">baz</li>
</ul>

核心CSS：display: grid + grid-template-columns: max-content，明确指定列宽由内容最宽项决定，同时保留父元素的横向滚动逻辑。

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