导航链接重叠

Question

因此，基本上，我希望在向下滚动页面时固定导航栏。但是通过将其位置从绝对更改为固定，链接似乎相互重叠。保证金和填充无效。如何固定它们并在每个链接之间留出一定的间隔？如果我的代码有问题，请纠正我。

HTML

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  width: 500px;
  height: 500px;
  grid-gap: 10px;
  background-color: white;
  width: 100%;
  height: 1500px;
  justify-content: center;
}

span {
  font-size: 30px;
  cursor: pointer;
}

#elem_1 {
  background-color: #F7F7F7;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  width: 100%;
}

#elem_1>img {
  width: 2.3vw;
  height: 4vh;
  position: relative;
  left: 220px;
  bottom: 9px;
}

#elem_1>h1 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #505050;
  position: relative;
  left: 120px;
  top: 30px;
}

nav a {
  position: sticky;
  right: 200px;
  float: left;
  margin-left: 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 800;
  color: grey;
}

#list_item_1 {
  margin: 20px;
  padding: 20px;
}

#nav_bar {
  font-size: 20px;
}

nav a:hover {
  background-color: pink;
}

nav {
  display: block;
  position: absolute;
  bottom: 910px;
  left: 1500px;
  width: 100%;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 5px;
  margin: 12px;
}

#three_bars {
  display: none;
}

#three_bars:checked~nav {
  display: block;
}

#three_bars_label {
  position: fixed;
  right: 35px;
  top: 35px;
}

#elem_2 {
  background-color: greenyellow;
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

#elem_3 {
  background-color: aliceblue;
  grid-column: 1 / 9;
  grid-row: 3 / 12;
}

#elem_4 {
  background-color: antiquewhite;
  grid-column: 9 / -1;
  grid-row: 3 / 12;
}

#elem_5 {
  background-color: aquamarine;
  grid-column: 1 / -1;
  grid-row: 12 / -1;
}

<div class="container">
  <div id="elem_1">
    <h1>RDMC</h1>
    <img src="./Images/HeartBeat.png">
    <input type="checkbox" id="three_bars">
    <nav>
     <ul><span id="nav_bar">
        <li class="list_item_1"><a href="#">Home</a></li>
        <li class="list_item"><a href="#">Donate</a></li>
        <li class="list_item"><a href="#">About us</a></li>
        <li class="list_item"><a href="#">Contact</a></li></span>
      </ul>
    </nav>
    <label for="three_bars" id="three_bars_label">
        <span><i class="fas fa-bars"></i></span>
    </label>
  </div>

  <div id="elem_2">Content</div>
  <div id="elem_3">Payment</div>
  <div id="elem_4">Address</div>
  <div id="elem_5">Contact</div>
</div>

Answer 1

我用CSS可以看到的主要问题是bottom:910px;和left:1500px的定位：您不知道用户的屏幕将是多大（最初我看不到导航栏！）我一开始就将其注释掉，将列表项的边距移到list_item_1 CSS中（边距顺序的缩写是右上左下-顺时针方向-所以我写了将5px边距底部合并的速记）。另外，我在您的导航栏中添加了display:inline-block;。

要提及的另一个（重要的）要点是，我将您的导航代码移到了nav / nav ul / nav li / css之后，因为css是按照其编写顺序读取的。这样，您应该使css保持逻辑顺序。

希望这会有所帮助

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  width: 500px;
  height: 500px;
  grid-gap: 10px;
  background-color: white;
  width: 100%;
  height: 1500px;
  justify-content: center;
}

span {
  font-size: 30px;
  cursor: pointer;
}

#elem_1 {
  background-color: #F7F7F7;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  width: 100%;
}

#elem_1>img {
  width: 2.3vw;
  height: 4vh;
  position: relative;
  left: 220px;
  bottom: 9px;
}

#elem_1>h1 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #505050;
  position: relative;
  left: 120px;
  top: 30px;
}



#nav_bar {
  font-size: 20px;
}



nav {
  display: inline-block;
  position: sticky;
 /* bottom: 910px;*/
  /*left: 1500px;*/
  width: 100%;
}


nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list_item_1 {
  margin: 12px 12px 5px 12px;
  padding: 10px;
}

nav li {
  display:inline-block;
 /* margin: 12px 12px 5px 12px;*/
}

nav a {
  display:inline-block;
  float: left;
  margin-left: 20px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Verdana", BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
  font-weight: 800;
  color:#000000;
}

nav a:hover {
  background-color: pink;
}

#three_bars {
  display: none;
}

#three_bars:checked~nav {
  display: block;
}

#three_bars_label {
  position: fixed;
  right: 35px;
  top: 35px;
}

#elem_2 {
  background-color: greenyellow;
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

#elem_3 {
  background-color: aliceblue;
  grid-column: 1 / 9;
  grid-row: 3 / 12;
}

#elem_4 {
  background-color: antiquewhite;
  grid-column: 9 / -1;
  grid-row: 3 / 12;
}

#elem_5 {
  background-color: aquamarine;
  grid-column: 1 / -1;
  grid-row: 12 / -1;
}

<div class="container">
  <div id="elem_1">
    <h1>RDMC</h1>
    <img src="./Images/HeartBeat.png">
    <input type="checkbox" id="three_bars">
    <nav>
    <ul id="nav_bar">
        <li class="list_item_1"><a href="#">Home</a></li>
        <li class="list_item_1"><a href="#">Donate</a></li>
        <li class="list_item_1"><a href="#">About us</a></li>
        <li class="list_item_1"><a href="#">Contact</a></li>
      </ul>
    </nav>
    <label for="three_bars" id="three_bars_label">
        <span><i class="fas fa-bars"></i></span>
    </label>
  </div>

  <div id="elem_2">Content</div>
  <div id="elem_3">Payment</div>
  <div id="elem_4">Address</div>
  <div id="elem_5">Contact</div>
</div>