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

muk1a3rh 于 4个月前发布在 React

关注(0)|答案(1)|浏览(82)

下面的代码片段从列表中抓取项并按顺序对它们进行排序。

{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> 
            
          </>
        ))}

字符串
我想把这些东西像这样排成四列-
x1c 0d1x的数据
但是，上面的代码片段给了我这个-

请问您有什么建议吗？

css

来源：https://stackoverflow.com/questions/77730371/place-unordered-lists-in-a-row-using-tailwind-css-in-react

1条答案

按热度按时间

rqenqsqc1#

考虑将.map() Package 在一个定义grid layout的元素中。我们应用：

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 />);

个字符

赞(0）回复(0）举报 4个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答