Question

我一直在使用 html、css 和 javascript 开发一个简单的水平导航栏。导航栏包含一个下拉菜单（名为 More）。单击“更多”菜单会导致隐藏链接（垂直）显示在“更多”标题下方，再次单击会导致链接再次隐藏。

我将导航栏中所有链接的边距设置为 2px（在 css 文件中），但链接之间的距离似乎不一致。具体来说，点击更多后，选项4和5之间的距离，以及选项5和6之间的距离，与其他链接之间的距离是不同的。你知道是什么导致了这个问题吗？

Screenshot

function clickMoreMenu() {
  var x = document.getElementById("hiddenlinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

#navbar {
  display: block;
  width: 425px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.navoption {
  text-align: center;
  display: block;
  float: left;
}

#moremenu {
  display: block;
}

#hiddenlinks {
  display: none;
  position: absolute;
  z-index: 1;
  margin-top: 0px;
}

#navbar a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100px;
  color: Blue;
  background: Yellow;
  border-style: solid;
  border-color: Blue;
  border-width: 1px;
  margin: 2px;
}

#navbar a.currentpage {
  color: DarkBlue;
  background: Gold;
}

#navbar a:hover {
  background: Blue;
  color: Yellow;
}

h1 {
  color: blue;
  text-align: center;
}

.clearleft {
  clear: left;
}

<h1>Distance Test</h1>
<nav id="navbar">
  <div class="navoption">
    <a href="index.html" class="currentpage">Index</a>
  </div>
  <div class="navoption">
    <a href="option2.html">Option 2</a>
  </div>
  <div class="navoption">
    <a href="option3.html">Option 3</a>
  </div>
  <div class="navoption" id="moremenu">
    <a href="javascript:void(0);" onclick="clickMoreMenu()">More...</a>
    <div id="hiddenlinks">
      <a href="option4.html">Option 4</a>
      <a href="option5.html">Option 5</a>
      <a href="option6.html">Option 6</a>
    </div>
  </div>
</nav>

<div class="clearleft">Some text.</div>

Answer 1

对您的 css 进行一些修改后，您就可以使用它了。

注意：在css中删除2个选项中的第1个！

function clickMoreMenu() {
  var x = document.getElementById("hiddenlinks");
  if (x.style.display == "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

#navbar {
  display: block;
  width: 425px;
  margin: 0px auto 20px auto;
}
.navoption {
  display: block;
  float: left;
  /* next line relative because #hiddenlinks is absolute */
  position: relative;
  text-align: center;
}
#hiddenlinks {
  display: none;
  position: absolute;
  top: 100%;
  left: 0%;
  z-index: 1;
}
#navbar a {
  box-sizing: border-box; /* keep padding & border in the button */
  display: block;
  width: 100px;
  margin: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid blue;
  text-align: center;
  text-decoration: none;
  color: blue;
  background: yellow;
}

/* option 1: all submenu items small gaps */
#navbar > div:last-child > a {
  margin-bottom: 0;
}

/* OR option 2: all submenu items same gap as topmenu */
#navbar #hiddenlinks a {
  margin-bottom: 4px;
}

#navbar a.currentpage {
  color: darkblue;
  background: gold;
}
#navbar a:hover,
#navbar a:active {
  background: blue;
  color: yellow;
}
h1 {
  color: blue;
  text-align: center;
}
.clearleft {
  clear: left;
}

<h1>Distance Test</h1>
<nav id="navbar">
  <div class="navoption">
    <a href="index.html" class="currentpage">Index</a>
  </div>
  <div class="navoption">
    <a href="option2.html">Option 2</a>
  </div>
  <div class="navoption">
    <a href="option3.html">Option 3</a>
  </div>
  <div class="navoption" id="moremenu">
    <a href="javascript:void(0);" onclick="clickMoreMenu()">More...</a>
    <div id="hiddenlinks">
      <a href="option4.html">Option 4</a>
      <a href="option5.html">Option 5</a>
      <a href="option6.html">Option 6</a>
    </div>
  </div>
</nav>

导航栏中链接之间的距离不一致

1 个答案: