CSS 居中子项，无论填充/边距如何

Question

基本上，我有这个网站:

http://www.ug.it.usyd.edu.au/~sgre9702/week3/dropDownMenu/semantics.html

我想将导航栏上的下拉列表项居中，我知道我可以将其居中:

left:-11px;

但是，我不想使用我计算出的值。相反，我希望它自动居中，同时考虑边距/填充值。在谷歌搜索了一下后，我不知道这是否可行。

我的相关 HTML 代码是:

<nav>
    <ul id="nav">
        <li><a href="">Tours</a>
            <ul>
                <li><a href="">New South Wales</a>
                <li><a href="">Australian Capital Territory</a>
                <li><a href="">Queensland</a>
                <li><a href="">Western Australia</a>
                <li><a href="">Northen Territory</a>
                <li><a href="">Tasmania</a>
                <li><a href="">South Australia</a>
                <li><a href="">Victoria</a>
            </ul>
        <li><a href="">Attractions</a>
        <li><a href="">Food</a>
        <li><a href="">Resources</a>
        <li><a href="">About</a>
        <li><a href="">Contact</a>
            <ul>
                <li><a href="">Online</a>
                <li><a href="">Phone</a>
                <li><a href="">Facimile</a>
            </ul>
    </ul>
</nav>

相关CSS:

/* general nav list */
nav ul li {
    background-color: #EEEEEE;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    margin: 0px 5px;
    padding: 5px;
    position: relative;
    text-align: center;
    width: 120px;
}

/* nav sub list */
nav ul li ul {
    display: none;
}

/* nav sub list shown */
nav ul li:hover ul {
    display: block;
    width: 142px;
    position: absolute;
    list-style-type: none;
}

/* nav sub list shown - list item */
nav ul li:hover ul li {
    display:block;
    background-color: #AACCFF;

    border: solid 1px #000000;
    position: relative;

    /*left:-11px;*/
}

Answer 1

从 ul>li 元素中删除填充并应用于 anchor 本身(它们将需要显示: block )。移除 sub-li 元素的边距

然后给 child ul width: auto。不过，子菜单 block 仍将向右偏移 1px，因为它的左边缘将从其父级的左边框结束的位置开始。您可以通过替换没有轮廓的边框(不影响其宿主元素的宽度)、在子 anchor/li 元素上放置边框或最终在子 UL 上尝试 left:-1px 值来解决这个问题。