React中使用Tailwind CSS实现无序列表横向四列布局的问题求助

问题根源 #

你当前的代码为每个字母组单独创建了带grid-cols-4的<ul>容器，导致每个组占据一整行（4列宽度），最终所有组垂直堆叠，无法形成预期的四列并排布局。

修复后的代码 #

<div className="grid grid-cols-4 gap-4">
  {Object.entries(sortedGroups).sort().map(([groupLetter, groupCities]: [string, any]) => (
    <>
      {/* 组标题占满4列宽度 */}
      <h2 className="col-span-4 font-bold text-lg">{groupLetter}</h2>
      
      {/* 城市列表自动填充4列 */}
      {groupCities.map((city: any) => (
        <li key={city.id} className="list-none">
          <Link to={city.url}>{city.name}</Link>
        </li>
      ))}
    </>
  ))}
</div>

关键修改说明 #

• 统一网格容器：将grid-cols-4和gap-4从每个<ul>移到外层父容器，让所有组共享同一个网格布局。
• 标题跨列：给组标题添加col-span-4类，使其占据整个网格宽度，作为字母组的分隔标题。
• 简化结构：移除float-left inline-block等冗余布局类，Grid布局会自动处理元素排列。
• 语义优化：将<h1>改为<h2>（页面应仅保留一个主<h1>），给<li>添加list-none可去除默认列表样式（按需调整）。

可选调整（组内独立四列） #

如果希望每个字母组的城市列表保持独立四列布局（而非跨组填充），可使用子网格结构：

<div className="space-y-4">
  {Object.entries(sortedGroups).sort().map(([groupLetter, groupCities]: [string, any]) => (
    <div className="grid grid-cols-4 gap-4">
      <h2 className="col-span-4 font-bold text-lg">{groupLetter}</h2>
      <ul className="col-span-4 grid grid-cols-4 gap-4">
        {groupCities.map((city: any) => (
          <li key={city.id}>
            <Link to={city.url}>{city.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  ))}
</div>

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