在我的主要水平导航中,我有一个名为#main-nav 的容器,其中包含 anchor 标记形式的按钮。 anchor 标记大小与#main-nav 容器不匹配,我不明白为什么。
哦,还有,下拉菜单在菜单基线上的位置比它们应该高几个像素,我不确定这是否相关。
我目前使用与菜单栏相同的高亮颜色和下拉菜单来掩饰问题,但这不是最佳选择。 (代码检查员清楚地显示了问题)
我的网站是http://www.darkmatter-designs.com/
任何帮助将不胜感激,我已经没有想法了。
最佳答案
使用 max-width 和 margin 0 auto将你的 ul 置于导航中心
#main-nav ul {
/* display: inline-block; */
position: relative;
max-width: 960px;
margin: 0 auto;
}
CSS 居中:
如果您只是想让 anchor “居中”:
#main-nav ul {
position: relative;
/* display: inline-block; */
max-width: 960px;
margin: 0 auto;
text-align: center;
}
#main-nav ul li {
/* float: left; */
display: inline-block;
}
要修复下拉列表,您可以将 padding-top 添加到 #main-nav ul ul
#main-nav ul ul {
background: #1E344A;
position: absolute;
top: 100%;
z-index: 1;
padding-top: 3px;/*was added*/
}
并且由于您对 ul ul
使用绝对位置,请确保将 position:relative
添加到父元素,如下所示:
#main-nav ul li {
float: left;
position: relative;/*was added*/
}
关于html - CSS 菜单突出显示大小不匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23578081/