无法创建与网格布局中的文本对齐的顶部和底部水平边框线

Question

我正在尝试在不中断网格布局的情况下绘制一条水平线。这就是我希望达到的目标：

我已经用网格系统包裹了所有导航元素。当我尝试从父元素创建一条水平线时，这些线被绘制成与图像对齐。

Answer 1

您可以将线条作为伪元素放在导航栏上 - 以百分比形式给出顶部和底部偏移量。但是请注意，当菜单与标题不一致时，这不会给出合理的结果 - 但这是可以理解的（以及它在 SO 片段中不起作用的原因）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lab04_New</title>
  <link rel="stylesheet" href="Lab04_new.css">
  <style>
 @media only screen and (max-width: 1280px) {
  .main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 3fr 4fr 2fr 2fr;
    grid-template-areas:
      "nav nav nav nav";
  }
  
  #navbar {
    grid-area: nav;
  }

  #navbar img, header, ul, li {
    display: inline-block;
    vertical-align: middle;
  }

  #navbar img {
    border-radius: 50%;
    margin-left: 20px;
  }

  h3 {
    font-size: 28px;
  }

  ul {
    float: right;
  }

  li {
    padding: 15px;
  }

}

section#navbar {
  position: relative;
  --offset: 30%;
  }
  
#navbar::before, #navbar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100vw;
  height: 1px;
  background-color: black;
  z-index: -1;
}

#navbar::before {
  top: var(--offset);
}

#navbar::after {
  top: calc(100% - var(--offset));
}

  </style>
  
</head>

<body>
  <div class = "main">
    <section id = "navbar">
      <img src="gear.jpg" alt="lens" width="90" height="90">
      <header>
        <h3>Art of Photography</h3>
      </header>
      <ul>
        <li><div class="navbar_left">Photography</div></li>
        <li><div class="navbar_left">History</div></li>
        <li><div class="navbar_right">Samples</div></li>
        <li><div class="navbar_right">About</div></li>
      </ul>
    </section>
  </div>
</body>
</html>

无法创建与网格布局中的文本对齐的顶部和底部水平边框线

Trouble creating top and bottom horizontal border lines aligning to the text in grid layout

css

grid

alignment

line