Question

我正在尝试创建一个下拉菜单，但文本总是下降到原始列表项的右侧。我一直在搞乱不同的文本对齐设置，但似乎无法做到正确。我的HTML可用here。我的CSS代码如下：

#navMenu,
#navMenu ul {
list-style: none;
height: 10px;
}
#navMenu {
float: left;
}
#navMenu > li {
float: left;
padding-right: 15px;
}
#navMenu li a {
display: block;
height: 2em;
line-height: .75em;
padding: 0 1.5em;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
text-align: end;

}
#navMenu > li > a {
color: #fff;
align: left;
text-align: left;
font-weight: bold;
}
#navMenu > li:hover > a {
background: #f09d28;
color: #000;
}

#navMenu ul {
position: absolute;
display: none;
align: left;
width: auto;
height: 50px;
background-color: #AAAAAA;
z-index: 999;
}
#navMenu ul li a {`enter code here`
list-style-position:inside;
}
#navMenu li:hover ul {
display: block;

}

Answer 1

子划线ul会创建padding。将子空间ul设为padding: 0。这应该可以帮到你。

Answer 2

默认情况下，浏览器会向ul添加一些左边距。您需要删除该填充：

#navMenu ul {
    padding: 0;
}

您可能还需要考虑使用CSS reset来预防此类问题。

Answer 3

在子区域中的<ul>左侧有一些额外的填充。通过添加此css修复它：

#navMenu ul {
    padding: 0;
    height: auto;
}

注意：height: auto;修复了子树的高度。

另外，请考虑添加CSS重置，例如：http://www.cssreset.com/

Answer 4

试试这个：

ul#navMenu ul {
padding-left: 0;
}

这将确保您只打到嵌套的ul而不是顶级ul

文本对齐在下拉菜单中不起作用

4 个答案: