CSS - 将 li 置于之前 li 下的中心位置

Question

我正试图将一个下拉菜单中的前一个列表居中。 我能想到的最好的办法是使用负边距将列表向左移动，但这并不统一。 有什么好办法吗？

#navigation {
    height: 50px;
    width: 960;
}
#navigation ul li {
    display: block;
    float: left;
    padding: 0 40px;
}
#navigation ul li ul {
    display:none;
    width: 240px;
}
#navigation li:hover ul {
    display:block;
    position: absolute;
    margin: 0 0 0 -35px;
    padding: 0;
}

Answer 1

在你的情况下，你需要添加以下内容 position:relative 对于 #navigation ul li，然后将其定位 #navigation li:hover ul 使用

left: 50%;
margin-left: -52px;

这样做，你会在一开始就定位好了。ul 父辈的一半 li 然后会根据它的尺寸向左移动。

Answer 2

试试这个编码。

#navigation ul li {
    border: 1px solid black;
    display: block;
    float: left;
    padding: 0 30px;
    width: 80px;
}