0

我似乎无法让我的菜单正确居中。任何人都可以看到问题吗？

    ul#navigation {
        float: left;
        margin: 0 auto;
        padding: 0;
        list-style-type: none;
        min-width: 100px;
        background: #003d4c;
        padding-bottom: 15px;
        text-align: center;
    }

    ul#navigation li {

        border: 1px black solid;
        min-width: 100px;
        background-color: white;
        list-style-type: none;
        display: inline-block;
    }

    ul.sub_navigation {
        position: absolute;
        display: none;
    }

    ul.sub_navigation li {
        clear: both;
    }

    a, a:active, a:visited {
        display: block;
        padding: 10px;
    }

    #header{
        text-align: center;
        padding: 10px 20px;
    }

这是HTML：

<div id="container">
    <div id="header">
        <br />
        <ul id="navigation">
            <li class="dropdown"><a href="#"></a>
                <ul class="sub_navigation">
                    <li><a href="#">Sub Navigation 1</a></li>
                    <li><a href="#">Sub Navigation 2</a></li>
                    <li><a href="#">Sub Navigation 3</a></li>
                </ul>
            </li>
            ...
4

2 回答 2

1

使导航居中是一个常见但不容易的问题，尤其是如果您希望它与跨浏览器兼容。我一直使用一种非常好的技术，在此页面上对此进行了很好的解释。

基本上归结为：

  • 你把你的容器 div 向左浮动，给它一个 100% 的宽度和一个相对的位置
  • 你将你的 ul 向左浮动，并给它一个 50% 的相对位置
  • 你将你的 li 向左浮动，并给它一个相对右侧 50% 的位置

查看链接以获取示例说明

于 2012-08-04T19:48:30.330 回答
0

我决定使用的解决方案是用这个 CSS 将主 ul 包装在一个 div 中：

.menuContainer {
    display: table;
    margin: auto;
}
于 2012-08-06T01:57:30.153 回答