如何将含子标签的无序列表放入CSS Grid的showcase网格？

我明白你想把导航列表放进.showcase这个Grid容器的指定区域里，但当前代码的核心问题是：你把Grid定位属性加在了a标签上——而a并不是.showcase的直接子元素，Grid容器只会识别自己的直接子元素作为网格项目，所以才会出现无法适配的情况。我们来一步步调整：

第一步：将导航容器定位到目标网格区域 #

首先，我们需要把ul#navigation（或者它的父元素nav）设置为.showcase网格的一个项目，指定它占据你想要的网格位置：

.showcase {
  grid-area: showcase;
  background-image: url("../pics/flower.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  grid-template-columns: 50px 300px repeat(4, 50px) 300px 70px 10px 70px 1fr;
  grid-template-rows: 50px 3fr 2fr;
  /* 可选：加个gap方便直观查看布局边界 */
  gap: 8px;
}

/* 把ul定位到你想要的网格区域 */
#navigation {
  grid-column: 3/7;
  grid-row: 1/2;
  /* 移除列表默认样式，避免影响布局 */
  list-style: none;
  padding: 0;
  margin: 0;
}

第二步：让列表项横向整齐排列 #

现在ul已经在Grid的指定位置了，接下来让里面的li横向排列，这里用Flex会更轻量化：

#navigation {
  /* 保留上面的属性，新增以下内容 */
  display: flex;
  justify-content: space-around; /* 让导航项均匀分布，可根据需求换成space-between等 */
  align-items: center;
  height: 100%; /* 占满网格行的高度，让导航垂直居中 */
}

/* 给a标签加些基础样式优化 */
#navigation a {
  text-decoration: none;
  color: #fff; /* 假设背景图偏暗，用白色文字保证可读性 */
  font-weight: 600;
}

修改后的完整代码 #

CSS #

.showcase {
  grid-area: showcase;
  background-image: url("../pics/flower.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  grid-template-columns: 50px 300px repeat(4, 50px) 300px 70px 10px 70px 1fr;
  grid-template-rows: 50px 3fr 2fr;
  gap: 8px;
}

#navigation {
  grid-column: 3/7;
  grid-row: 1/2;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

#navigation a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
}

HTML #

<div class="showcase">
  <nav>
    <ul id="navigation">
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">Treatment</a></li>
      <li><a href="#">The Lab</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
    <p>Call us: 123-456-7890</p>
    <button type="button">Book Now</button>
  </nav>
</div>

关键注意点 #

• 只有Grid容器的直接子元素才能被识别为网格项目，所以必须把导航的容器（ul或nav）设置为Grid项目，而不是它的子元素a。
• 如果你想让导航项等宽排列，也可以给ul用Grid布局，比如grid-template-columns: repeat(4, 1fr)，根据你的需求选择即可。

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