网格问题：为什么第 2 列中的 <ul> <li> 项显示在彼此的下面？我希望他们彼此相邻。 （产品、关于和关注）

Question

与 CSS 网格相关的问题：我希望 Fotomatic、产品详细信息、关于我们和关注我们显示在同一行中，每个显示在各自的列中，但产品详细信息、关于我们和关注我们在彼此下方显示列号 2。

HTML

   <header>
    <div class="hcontent">
      <a class="fotomatic" href="index.html" class="desktop logo">Fotomatic</a>
      <nav class="desktop">
        <ul>
          <li ><a href="#" class="product">Product detail</a></li>
          <li ><a href="#" class="about">About us</a></li>
          <li ><a href="https://www.instagram.com/" class="follow">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
        </ul>
      </nav>
      <nav class="mobile">
        <ul>
          <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
          <li><a href="#" class="button">Join us</a></li>
        </ul>
      </nav>
    </div>
  </header>

CSS

.hcontent {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template-rows: 1fr;
  grid-template-columns: 70% 10% 10% 10%;
}

.fotomatic {
  grid-column: 1 / 2;
}

.product {
  grid-column: 2 / 3;
}

.about {
  grid-column: 3 / 4;
}

.follow {
  grid-column: 4 / 5;
}

.mobile {
  display: none;
}

.icon {
  width: 20px;
}

@media (max-width: 480px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }
}

我尝试了很多东西，但无法弄清楚。

项目是否显示在同一列中，因为它们位于 下？我对父母/孩子关系的看法是错误的吗？

Answer 1

<li>

- 元素默认垂直显示。要水平显示它们，请将此（例如，有更多选项）添加到您的 CSS 中：

li {
  display: inline;
}

如果您不希望所有

<li>

元素水平显示，请使用类名。

要将元素放置在网格的单独列中，它们必须处于同一级别。尝试将您的 html 更改为：

<header>
  <div class="hcontent">
    <a class="fotomatic desktop logo" href="index.html">Fotomatic</a>
    <a class="desktop product" href="#">Product detail</a>
    <a class="desktop about" href="#">About us</a>
    <a class="desktop follow" href="https://www.instagram.com/">
      Follow us <img class="icon" src="./resources/images/instagram.png">
    </a>
    <a class="mobile" href="#">
      <img src="./resources/images/ic-logo.svg">
    </a>
    <a class="mobile" href="#">
      <img src="./resources/images/ic-product-detail.svg">
    </a>
    <a class="mobile" href="#">
      <img src="./resources/images/ic-about-us.svg">
    </a>
    <a class="mobile button" href="#">Join us</a>
  </div>
</header>

Answer 2

网格容器将其每个子容器放入网格上的单独单元格中。在您的示例中，

<div class="hcontent">

只有三个孩子：

1. <a class="fotomatic">

2. <nav class="desktop">

3. <nav class="mobile">

使用 Flexbox 可以更轻松地实现您想要实现的目标，因为水平放置是默认设置，无需定义网格轨道大小。 “hcontent”容器和“桌面”

ul

都应该是

display: flex

。与 Grid 一样，只有直接子级才能使用 Flexbox 进行定位。

.hcontent {
  display: flex;
  height: 200px;
}

.fotomatic {
  margin-inline-end: auto;
}

.desktop ul {
  display: flex;
  margin: 0;
  padding: 0;
  gap: 1em;
  align-items: center;
  list-style-type: none;
}

.icon {
  width: 20px;
}

.mobile {
  display: none;
}

@media (max-width: 480px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }
}

<header>
  <div class="hcontent">
    <a class="fotomatic" href="index.html" class="desktop logo">Fotomatic</a>
    <nav class="desktop">
      <ul>
        <li ><a href="#" class="product">Product detail</a></li>
        <li ><a href="#" class="about">About us</a></li>
        <li ><a href="https://www.instagram.com/" class="follow">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
      </ul>
    </nav>
    <nav class="mobile">
      <ul>
        <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
        <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
        <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
        <li><a href="#" class="button">Join us</a></li>
      </ul>
    </nav>
  </div>
</header>