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＆gt; li元素中删除填充并应用于锚点本身（它们将需要display：block）。从子元素

中删除边距

然后给孩子ul宽度：auto。然而，子菜单块仍然会向右偏移1px，因为它的左边缘将从其父边界的边界结束。您可以通过替换没有轮廓的边框（不影响其主机元素的宽度），在子锚点/ li元素上放置边框或最后在子UL上尝试左边：-1px值来解决这个问题。 / p>

无论填充/边距，CSS居中的儿童

1 个答案: