0

私は最初の Web サイトに取り組んでいますが、ナビゲーション バーを中央に配置する方法について少し混乱しています。幅を定義しようとしましたが、それがブロック要素であることを確認し、margin-left と margin-right を auto に設定しましたが、まだ中央に配置されていません。ここに私のcssとhtmlファイルがあります。

HTML:

<html>
<head>
    <title>Test Site</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Misc</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
            <li><a href="#">Donate</a></li>
        </ul>
    </div>
</body>
</html>

CSS:

.nav > ul {
    width: 960px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nav ul {
    list-style: none;
    background: #444444;
    margin: 0px;
    padding: 0px;
}

.nav li {
    float: left;
    width: 150px;
    position: relative;
    background: #444444;
    text-align: center;
    border: 1px solid white;
    height: 30px;
    line-height: 30px;
}

.nav li ul li {
    float: none;
    width: 140px;
    text-align: left;
    padding: 5px;
    border-top: 1px solid white;
    line-height: 30px;
}

.nav li ul {
    position: absolute;
    top: 30px;
    left: 0px;
    visibility: hidden;
}

.nav li:hover {
    background-color: maroon;
}

.nav li:hover ul {
    visibility: visible;

}

.nav a {
    text-decoration: none;
    color: white;
}

.nav li ul {
    float: none;
}
4

4 に答える 4

2

あなたはそれを中央に配置したであろう定義をオーバーライドしています...

変化する：

.nav > ul {
    width: 960px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nav ul {
    list-style: none;
    background: #444444;
    margin: 0px; /* overrides previously defined margin */
    padding: 0px; /* overrides previously defined margin */
}

に：

.nav > ul {
    width: 960px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.nav ul {
    list-style: none;
    background: #444444;
    /* margin: 0; */
    padding: 0px;
}
于 2013-03-29T00:11:15.063 に答える
0

別の（そしてより良い）アプローチは、

  1. .nav > ulと規則の位置を交換します。つまり、 (比較的一般的な)後に.nav ul(より具体的な).nav > ul規則を指定します。.nav ul
  2. そして設定width: 608px;_.nav > ul

これがどのように機能するかです：

a)をすべての要素に.nav ul設定します。すべての要素 のデフォルトのパディング/マージンを削除します。margin: 0; padding: 0<ul><ul>

b) これで ( for.nav > ulの場合、左右の余白が に設定されておらず、 が であると仮定auto) 、コンテナを水平に覆う左揃えのメイン ナビゲーションができました。したがって、水平方向の中央に配置するには、ナビゲーション項目を新しい行に移動せずに可能な最小幅に幅を設定します。つまり、コンテナの水平方向の中央に配置するためにマージンを設定します。width960px608pxauto

ここにCSSがあります

.nav ul{
   list-style: none;
   background: #444444;
   margin: 0px;
   padding: 0px;
}

.nav > ul{
   width: 608px;
   display: block;
   margin-left: auto;
   margin-right: auto;
}

役立つことを願っています

于 2013-03-29T10:37:48.443 に答える
0

.nav > ul ul を .nav > ul li に変更し、

.nav li ul {
    position: relative;
    top: 0px;
    padding-left:0;
    visibility: hidden;
}
于 2013-03-29T00:16:34.687 に答える
0

の幅は、その.nav>ul中のすべてのナビゲーション項目の合計幅よりも大きく設定されています。そうあるべきであり、ルール宣言 width: 608px;に追加する必要margin: 0 auto;があります.nav ul

.nav > ulとの最終規則.nav ul

.nav > ul{
  width: 608px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nav ul{
  list-style: none;
  background: #444;
  margin: 0 auto;
  padding: 0;
}
于 2013-03-29T00:20:24.463 に答える