Question

我的导航栏有以下代码，似乎无法将其放在网站上。我究竟做错了什么？删除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>

Answer 1

您需要添加display：block;

Answer 2

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

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

<div id="wrapper"> 

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

</div>

Answer 3

它已经居中，只是你为菜单使用了显式宽度，所以考虑减少菜单宽度

Demo

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;
}

Fixed demo

Answer 4

我相信以下应该可以做到这一点;

＆lt; div id =“as”align =“center”＆gt;

无法居中我的导航栏

4 个答案: