0

我的导航栏有以下代码，但似乎无法将其集中在网站上。我究竟做错了什么？删除 float: left 对定位没有任何作用。谢谢。

css

ul#list-nav {
    list-style: none;
    margin: 20px auto;
    padding: 0px;
    width: 800px;
}

ul#list-nav li {
    display: inline;
}

ul#list-nav li a {
    text-decoration: none;
    padding: 5px 0;
    width: 100px;
    float: left;
    background: #485e49;
    color: #eee;
    text-align: center;
    border-left: 1px solid #fff;
}

ul#list-nav li a:hover {
    background: #a2b3a1;
    color: #000
}

html

</head>
<body>
    <div id="as">
        <ul id="list-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </div>
</body>
4

4 回答 4

0

您将需要添加 display: block;

于 2012-11-18T06:34:16.693 回答
0

您需要将导航栏包装在包装器 div 中，然后将该 div 的边距设置为 auto ，如下所示：

<style>
#wrapper {
 margin: auto;
}
</style>

<div id="wrapper"> 

<!-- (your nav bar code here) -->

</div>
于 2012-11-18T06:36:13.417 回答
0

它已经居中，只是您正在为菜单使用显式宽度，因此请考虑减小菜单宽度

演示

CSS

ul#list-nav {
  list-style:none;
  margin:20px auto;
  padding:0px;
  width:800px;
  border: 1px solid #ff0000;
  overflow: hidden;
}

目前我已经做到了205px

CSS

ul#list-nav {
  list-style:none;
  margin:20px auto;
  padding:0px;
  width:205px;
  border: 1px solid #ff0000;
  overflow: hidden;
}

固定演示

于 2012-11-18T06:40:22.103 回答
0

我相信以下应该可以解决问题；

<div id="as" align="center">

于 2012-11-18T06:53:09.987 回答