如何在 CSS 网格中并排设置列表项目

Question

我需要并排放置列表项，但我很难做到。

.logo {
  display: grid;
  grid-column: span 2;
  justify-content: start;
}

.logo h4 {
  grid-column: 2;
}

nav {
  display: grid;
}

ul {
  text-transform: uppercase;
  list-style: none;
  gap: 20px;
}

<header>
  <div class="logo">
    <img src="image 17.png" alt="My Learning Journal logo">
    <h4>My learning journal</h4>
  </div>
  <nav>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Answer 1

你可以用

display:flex

把李氏并排放置

ul {
  text-transform: uppercase;
  list-style: none;
  gap: 20px;
  display: flex
}

<ul>
  <li><a href="#">About Me</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Answer 2

水平菜单可以在 Flex 和 Grid 上完成。 如果您正在掌握网格，请使用

grid-auto-flow

规则设置一般流向，或者使用

grid-template-columns

以及自动调整/自动填充来声明动态列布局。

ul {
  text-transform: uppercase;
  list-style: none;
  
  display: grid;
  grid-auto-flow: column; /*  first way */
  grid-template-column: repeat(auto-fill, 1fr) /* second way */

  column-gap: 20px;
}

Answer 3

您发布的代码存在一些问题；主要是你试图将元素定位在其祖先声明的网格中 or - 在

.logo

CSS 的情况下 - 试图将元素定位在

grid-column: 2

中，尽管该元素不是网格项（元素本身有

display: grid

但它 - 显然？ - 不能放在它自己的第二列中。

以下方法——在代码中带有解释性注释——似乎可以满足您的要求：

/* removing browser default margins and padding, setting the sizing
   algorithm to border-box; this includes border-sizes and padding
   in the declared width of the elements: */

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.logo {
  /* you've set display: grid; which means the children of this element
     become grid-items, but this element is not (unless its parent is
     also set to display: grid, but you haven't shown that in your code: */
  display: grid;
  /* setting the same gap as declared for the <ul> element: */
  gap: 20px;
  /* the following rule has no effect, as this element isn't a grid-item: */
  grid-column: span 2;
  justify-content: start;
  /* to create a two-column grid layout, we use the following: */
  grid-template-columns: repeat(2, 1fr);
}


/* this is just so that we can visualise the <img> element's placement,
   adjust to your taste: */

.logo img {
  background-image: repeating-linear-gradient( -45deg, transparent 0 5px, #eee9 5px 7px);
  /* setting the maximum width (in left-to-right, top-to-bottom languages, like Latin and
     its derivatives) of the element to be 100% of the available space: */
  max-inline-size: 100%;
  /* and for the <img> to fill the available space: */
  object-fit: cover;
}

.logo h4 {
  grid-column: 2;
}

ul {
  display: grid;
  /* setting two grid-columns, with the repeat() function; this sets the 2 columns
     to both have the size of 1fr (one fraction of the available space), so that
     they are each equally sized:  */
  grid-template-columns: repeat(2, 1fr);
  text-transform: uppercase;
  list-style: none;
  gap: 20px;
}

nav a {
  background-color: lightskyblue;
  color: #fff;
  display: block;
}

<header>
  <div class="logo">
    <img src="image 17.png" alt="My Learning Journal logo">
    <h4>My learning journal</h4>
  </div>
  <nav>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

值得指出的是，在这种情况下，

display: flex

可能是首选：

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.logo {
  /* you've set display: grid; which means the children of this element
     become grid-items, but this element is not (unless its parent is
     also set to display: grid, but you haven't shown that in your code: */
  display: grid;
  /* setting the same gap as declared for the <ul> element: */
  gap: 20px;
  justify-content: start;
  /* to create a two-column grid layout, we use the following: */
  grid-template-columns: repeat(2, 1fr);
}

.logo img {
  background-image: repeating-linear-gradient( -45deg, transparent 0 5px, #eee9 5px 7px);
  min-inline-size: 100%;
  object-fit: cover;
}

.logo h4 {
  grid-column: 2;
}

ul {
  /* setting flex layout: */
  display: flex;
  text-transform: uppercase;
  list-style: none;
  /* using gap as before: */
  gap: 20px;
}

li {
  /* instructing the <li> element(s) to expand to fill available space: */
  flex-grow: 1;
}

nav a {
  background-color: lightskyblue;
  color: #fff;
  display: block;
}

<header>
  <div class="logo">
    <img src="image 17.png" alt="My Learning Journal logo">
    <h4>My learning journal</h4>
  </div>
  <nav>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

参考资料：

• CSS 逻辑属性.

• display

  .

• gap

  .

• grid-column

  .

• grid-template-columns

  .

• justify-content

  .

• max-inline-size

  .

• object-fit

  .

• repeat()

  .