如何使用CSS Grid创建水平ul列表及水平对齐的HTML/CSS导航栏？

嘿，我来帮你搞定这个CSS Grid的问题！你遇到的导航栏文字堆叠的情况，其实是因为默认的列表项（li）是块级元素，会自动占满整行。用CSS Grid来实现水平排列超直观，咱们分两部分来拆解：

首先，咱们先从基础的水平列表开始。默认情况下，<ul>里的<li>是垂直堆叠的，咱们只需要给<ul>加上Grid布局，就能轻松让它们水平排列。

先看完整代码：

<ul class="horizontal-list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ul>

/* 重置默认列表样式，避免浏览器自带的padding/margin */
.horizontal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 开启Grid布局 */
  display: grid;
  /* 让子元素沿水平方向（列）排列 */
  grid-auto-flow: column;
  /* 设置列表项之间的间距，可选 */
  gap: 1.5rem;
  /* 可选：让文字垂直居中 */
  align-items: center;
}

关键知识点解释：

• display: grid;：把<ul>变成Grid容器，里面的<li>就成了Grid项目。
• grid-auto-flow: column;：告诉Grid默认沿着列方向排列项目，也就是水平方向（默认是row，垂直方向）。
• gap：用来控制列表项之间的间距，比用margin更简洁，不会出现外边距重叠的问题。

如果想要列表项能自适应容器宽度，比如空间不够时自动换行，可以把grid-auto-flow: column;换成grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));，这样每个列表项会至少占100px，多余空间自动分配，还能实现响应式换行。

导航栏的需求和水平列表类似，但通常会有背景、链接样式、hover效果这些细节。咱们直接上完整的可复用方案：

<nav class="navbar">
  <ul class="nav-list">
    <li><a href="#home">首页</a></li>
    <li><a href="#products">产品</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
</nav>

.navbar {
  background-color: #2c3e50;
  padding: 0.8rem 2rem;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  /* 控制导航项之间的间距 */
  gap: 2rem;
  /* 让导航项在容器中水平居中，可选：换成justify-content: flex-end; 就是右对齐 */
  justify-content: center;
  /* 垂直居中文字，适配导航栏高度 */
  align-items: center;
  min-height: 40px;
}

.nav-list a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  /* 给链接加上点击区域，hover时更友好 */
  display: block;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}

.nav-list a:hover {
  color: #3498db;
}

/* 响应式适配：屏幕小于768px时，导航栏垂直排列 */
@media (max-width: 768px) {
  .nav-list {
    grid-auto-flow: row;
    text-align: center;
  }
}

为什么你之前会出现堆叠问题？
大概率是这两个原因：

1. 没有给<ul>设置display: grid;，<li>还是默认的块级元素，占满整行导致堆叠。
2. 可能给<li>加了width: 100%;这类强制占满宽度的样式，Grid布局下如果没有特殊设置，项目不会自动占满整行，所以要检查有没有这类冲突样式。

额外优化点：

• justify-content可以控制导航项的水平位置：flex-start（左对齐）、center（居中）、flex-end（右对齐）、space-between（两端对齐），按需调整。
• 加上media query，在小屏幕上自动切换成垂直排列，提升移动端体验。

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