在 React 中使用 tailwind CSS 将无序列表放在一行中

Question

以下代码片段从列表中获取项目并按字母顺序对它们进行排序。

{Object.entries(sortedGroups).sort().map(([groupLetter, groupCities]: [string, any]) => (
          <>
          
          <ul className="grid-cols-4 gap-4 float-left inline-block">
              <h1>{groupLetter}</h1>
            
            {groupCities.map((city:any) => (
              <>
                <li key={city.id} className="col-span-1">
                  <Link to={city.url}>{city.name}</Link>
                </li>
              </>
            ))}
            </ul> 
            
          </>
        ))}

我想像这样将项目并排排列成四列-

但是，上面的代码片段给了我这个 -

请问有什么解决办法吗？

Answer 1

考虑将

.map()

包装在定义 网格布局 的元素中。我们申请：

• display: grid

  ，通过

  grid

  类将布局设置为网格。

• grid-template-columns: repeat(4, 1fr)

  ，通过

  grid-cols-4

  类设置4个显式网格列轨道。这将根据您的要求将元素布局为四列。

• gap: 1rem

  ，通过

  gap-4

  添加每个网格元素之间的间距。我认为你通过你的尝试推断出你想要这个。

const Link = ({ children, ...props }) => <a {...props}>{children}</a>

const sortedGroups = {
  A: [
    { name: "Alabama", id: "Alabama", url: "Alabama" },
    { name: "Austin", id: "Austin", url: "Austin" },
    { name: "Atlanta", id: "Atlanta", url: "Atlanta" },
    { name: "Anchorage", id: "Anchorage", url: "Anchorage" },
  ],
  B: [
    { name: "Baltimore", id: "Baltimore", url: "Baltimore" },
    { name: "Buffalo", id: "Buffalo", url: "Buffalo" },
  ],
  D: [{ name: "Denver", id: "Denver", url: "Denver" }],
  F: [{ name: "Florida", id: "Florida", url: "Florida" }],
  K: [{ name: "Kansas City", id: "Kansas City", url: "Kansas City" }],
};

function App() {
  return (
    <div className="grid grid-cols-4 gap-4">
      {Object.entries(sortedGroups)
        .sort()
        .map(([groupLetter, groupCities]) => (
          <ul>
            <h1>{groupLetter}</h1>
            {groupCities.map((city) => (
              <li key={city.id}>
                <Link to={city.url}>{city.name}</Link>
              </li>
            ))}
          </ul>
        ))}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.0"></script>

<div id="app"></div>