0

基本上，我有这个网站：

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;*/
}
4

1 回答 1

2

从 ul>li 元素中删除填充并应用于锚本身（它们将需要 display:block）。从 sub-li 元素中删除边距

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

于 2013-08-19T00:04:55.510 回答