在中间浮动左对齐的水平菜单

时间:2012-02-08 01:52:40

标签: css html5

我很难让菜单列表浮动在其父容器的中心。以下是该页面的地址:simplekitchenandbath.com/staging/ 以及必要的代码片段:

    div#wrapper {
        width:1100px;
        margin:0 auto;
        padding:0 0 50px 0;
    }

       div#content-main {
            background-color:#000;
            width:1024px;
            margin:0 auto;
        }

            nav {
                background-color:#000;
                height:30px;
            }

                div#nav-container {
                width:720px;
                margin:0 auto;
            }

ul#nav                         { position:relative; }
ul#nav li                      { float: left; zoom: 1; list-style-type:none; margin:0; border-bottom:1px solid #FFF; }
ul#nav a:hover                 { color:#DDD; text-decoration:none; }
ul#nav a:active                { color:#DDD; }
ul#nav li a                    { display:block; padding:0 10px 0 0; color:#FFF; text-transform:uppercase; }
ul#nav li:last-child a          { padding-right:0; }
ul#nav li.hover, ul#nav li:hover  { position: relative; }

3 个答案:

答案 0 :(得分:1)

使宽度变小并将其对齐在元素容器内的中心位置,并将其边距设置为0 auto;尝试使用css3媒体查询响应网页设计并针对两种不同的显示器尺寸...因为780px监视器上的网站有滑块水平移动....所以基本上:

<div class="container">
    ... some code ...
</div>

css:
.container {
    width: 960px;
    margin: 0 auto;
}

感谢阅读......很高兴听到我的回答。

答案 1 :(得分:0)

div#nav-container {
  width:575px;
  margin:0 auto;
}

#nav-container的宽度太大了。设置为575px!

答案 2 :(得分:0)

display:inline-block元素上使用#nav,在text-align:center上使用#nav-container