我很难让菜单列表浮动在其父容器的中心。以下是该页面的地址: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; }
答案 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