对齐导航区

Question

我正在尝试制作一个简单的导航区域，但我遇到一个小问题，让所有东西都能正确放置。我要做的是让每个标签插槽彼此相邻，但由于某种原因，每个标签下方都有一个空格。谁能看到我在哪里错了？

这也导致我的图像区域和文本区域不再相互内联，所以我似乎也无法弄清楚为什么会发生这种情况。

function menu1() {
  document.getElementById("menu1").className = "menuOn";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu2() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOn";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu3() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOn";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu4() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOn";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu5() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOn";
  document.getElementById("menu6").className = "menuOff";
}

function menu6() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOn";
}

.menuOn {
  color: #fff;
  background-color: #2f8fcb;
}

.menuOff {
  text-decoration: none;
  background-color: #e5eff6;
  color: #666;
}

#menuTab {
  width: 25%;
  font-size: 13px;
}

#listPic {
  float: left;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  margin-top: 13px;
  margin-left: 10px;
  margin-right: 5px;
}

#listName {
  padding-top: 5px;
}

#listName p {
  margin: 15px;
}

<div id="menuTab">
  <div id="menu1" class="menuOn" onclick="menu1()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Health & Safety</p>
    </div>
  </div>
  <div id="menu2" class="menuOff" onclick="menu2()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Enviromental</p>
    </div>
  </div>
  <div id="menu3" class="menuOff" onclick="menu3()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Accounting</p>
    </div>
  </div>
  <div id="menu4" class="menuOff" onclick="menu4()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Haulage</p>
    </div>
  </div>
  <div id="menu5" class="menuOff" onclick="menu5()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Emails</p>
    </div>
  </div>
  <div id="menu6" class="menuOff" onclick="menu6()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Announcements</p>
    </div>
  </div>
</div>

Answer 1

由于您浮动了div的内容，它会缩小，就好像内容不存在一样。将setdiff()添加到overflow:auto;和.menuOn以使其扩展到div的内容。

.menuOff

function menu1() {
  document.getElementById("menu1").className = "menuOn";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu2() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOn";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu3() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOn";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu4() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOn";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu5() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOn";
  document.getElementById("menu6").className = "menuOff";
}

function menu6() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOn";
}

.menuOn {
  color: #fff;
  background-color: #2f8fcb;
  overflow:auto;
}

.menuOff {
  text-decoration: none;
  background-color: #e5eff6;
  color: #666;  overflow:auto;

}

#menuTab {
  width: 25%;
  font-size: 13px;
}

#listPic {
  float: left;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  margin-top: 13px;
  margin-left: 10px;
  margin-right: 5px;
}

#listName {
  padding-top: 5px;
}

#listName p {
  margin: 15px;
}

Answer 2

你还没有清除浮子。您需要在menuOn和menuOff之后清除浮动。

.menuOn {
    overflow: hidden;
    clear: both;
}
.menuOff {
    overflow: hidden;
    clear: both;
}

Answer 3

我刚刚将浮动更改为inline-block并添加了vertical-align:middle。浮子弄乱了元素的流动。

function menu1() {
  document.getElementById("menu1").className = "menuOn";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu2() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOn";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu3() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOn";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu4() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOn";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu5() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOn";
  document.getElementById("menu6").className = "menuOff";
}

function menu6() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOn";
}

.menuOn {
  color: #fff;
  background-color: #2f8fcb;
}

.menuOff {
  text-decoration: none;
  background-color: #e5eff6;
  color: #666;
}

#menuTab {
  width: 25%;
  font-size: 13px;
  display: inline-block;
}
#listPic {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  margin-left: 10px;
  margin-right: 5px;
  vertical-align: middle;
}

#listName {
  display: inline-block;
  vertical-align: middle;
}

#listName p {
  margin-left: 15px;
}

<div id="menuTab">
  <div id="menu1" class="menuOn" onclick="menu1()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Health & Safety</p>
    </div>
  </div>
  <div id="menu2" class="menuOff" onclick="menu2()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Enviromental</p>
    </div>
  </div>
  <div id="menu3" class="menuOff" onclick="menu3()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Accounting</p>
    </div>
  </div>
  <div id="menu4" class="menuOff" onclick="menu4()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Haulage</p>
    </div>
  </div>
  <div id="menu5" class="menuOff" onclick="menu5()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Emails</p>
    </div>
  </div>
  <div id="menu6" class="menuOff" onclick="menu6()">
    <div id="listPic">
    </div>
    <div id="listName">
      <p>Announcements</p>
    </div>
  </div>
</div>

Answer 4

首先，您在listPic和listName上使用了应该使用课程的ID。就个人而言，我建议使用display: inline-block;来对齐div，而不是使用float: left;。

请参阅代码段：

function menu1() {
  document.getElementById("menu1").className = "menuOn";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu2() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOn";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu3() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOn";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu4() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOn";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOff";
}

function menu5() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOn";
  document.getElementById("menu6").className = "menuOff";
}

function menu6() {
  document.getElementById("menu1").className = "menuOff";
  document.getElementById("menu2").className = "menuOff";
  document.getElementById("menu3").className = "menuOff";
  document.getElementById("menu4").className = "menuOff";
  document.getElementById("menu5").className = "menuOff";
  document.getElementById("menu6").className = "menuOn";
}

.menuOn {
  color: #fff;
  background-color: #2f8fcb;
}

.menuOff {
  text-decoration: none;
  background-color: #e5eff6;
  color: #666;
}

#menuTab {
  width: 25%;
  font-size: 13px;
}

.listPic {
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  display: inline-block;
  margin: 5px 5px 5px 5px;
}

.listName {
  display: inline-block;
}

.listName p {
  margin: 0;
  padding-top: 12px;
}
#menuTab > div {
  width: 155px;
  height: 34px;
  display: flex;
}

<div id="menuTab">
  <div id="menu1" class="menuOn" onclick="menu1()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Health & Safety</p>
    </div>
  </div>
  <div id="menu2" class="menuOff" onclick="menu2()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Enviromental</p>
    </div>
  </div>
  <div id="menu3" class="menuOff" onclick="menu3()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Accounting</p>
    </div>
  </div>
  <div id="menu4" class="menuOff" onclick="menu4()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Haulage</p>
    </div>
  </div>
  <div id="menu5" class="menuOff" onclick="menu5()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Emails</p>
    </div>
  </div>
  <div id="menu6" class="menuOff" onclick="menu6()">
    <div class="listPic">
    </div>
    <div class="listName">
      <p>Announcements</p>
    </div>
  </div>
</div>