Html 对齐导航区域

我正在尝试创建一个简单的导航区域，但是我遇到了一个小问题，就是如何让所有东西都正确就位。我想做的是使每个标签槽彼此相邻，但由于某些原因，每个标签槽下面都有一个空间。有人能看出我错在哪里吗

这也导致了我的图像区域和文本区域不再相互关联，所以我似乎也不明白为什么会发生这种情况

函数菜单1（）{
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”；
}
函数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”；
}
函数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”；
}
函数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”；
}
函数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”；
}
函数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{
颜色：#fff；
背景色：#2f8fcb；
}
梅诺夫先生{
文字装饰：无；
背景色：#E566；
颜色：#666；
}
#梅努塔布{
宽度：25%；
字体大小：13px；
}
#listPic{
浮动：左；
宽度：20px；
高度：20px；
边框：2倍实心#000；
边缘顶端：13px；
左边距：10px；
右边距：5px；
}
#列表名{
垫面：5px；
}
#列表名p{
利润率：15px；
}

健康与安全

环境的

会计

运输

电子邮件

公告

您尚未清除浮动。您需要清除

menuOn

和

menuOff

之后的浮点值

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

---

你还没有清理你的彩车。您需要清除

menuOn

和

menuOff

之后的浮点值

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

---

由于浮动div的内容，它会收缩，就好像内容不在那里一样。添加

溢出：自动

到

.menuOn

和

.menuOff

以使其扩展到div的内容

函数菜单1（）{
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”；
}
函数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”；
}
函数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”；
}
函数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”；
}
函数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”；
}
函数menu6（）{
document.getElementById（“menu1”）.className=“menuOff”；
document.getElementById（“menu2”）.className=“menuOff”；
document.getElementById（“menu3”）.className=“menuOff”；
document.getElementById（“menu4”）.className=“menuOff”；
document.getElementById（“m