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

次のようにすればうまくいくと思います。

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

于 2012-11-18T06:53:09.987 に答える
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 に答える