如何在CSS网格中创建水平ul列表？

Question

在使用CSS GRID时，如何在html / css中使用水平对齐方式创建导航栏？

我无法使文字排成一行，无论我做什么，文字都彼此叠放。

Answer 1

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   list-style-type: none;
}

<html>
<head>
</head>
<body>
<nav>
  <ul>
    <li>Home</li>
    <li>Contact us</li>
    <li>Report</li>
  </ul>
</nav>
</body>
</html>

使用CSS GRID的导航栏的最简单示例