0

優れたナビゲーション バーを作成するための理解を深めるために、独自のナビゲーション バーを作成しようとしています。私が抱えている問題は、ナビゲーションバーを中央に配置することです。これで、margin-left: auto および margin-right: auto を使用すると通常はうまくいくことがわかりました。過去にそれを使用したことがありますが、この場合、これらのスタイル要素をどこに配置しても、ナビゲーションバーが表示されないようです中心。ボディを 100% に設定し、以下にコードを示します。*注: ナビゲーション バーのコンテナを中央に配置しようとしましたが、まだ機能していないようです。

#navbar ul {
list-style-type:none;
color: #000;
padding: 0px;
text-align: center;
}
li:hover {
background-color: #cc2c32;
padding: 16px .1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.subcategory {
display: none;
width: 1031px;
height: 200px;
background-color: #cc2c32;
color: #03F;
position: absolute;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-top: 15px;
}
li:hover .subcategory {
display: block;
}
#navbar {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #dee8ff;
float: left;
font-family: Arial, Helvetica, sans-serif;
margin-left: auto;
margin-right: auto;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
padding: 0 1.5em;
text-decoration: none;
}
ol {
list-style-type: none;
float: left;
display: block;
}
.contentwrapper {
margin-top: 10px;
margin-bottom: 10px;
height: 180px;
width: 200px;
background-color: inherit;
position: relative;
color: #2d4594;
}
a:link {
color: #2d4594;
text-decoration: none;
}
a:visited {
color: #2d4594;
text-decoration: none;
}
a:hover {
color: #2d4594;
text-decoration: none;
}

そして私のHTMLは

<body>
<div id="navbar">
  <ul> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory">
            <div class="contentwrapper">
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            </div>
        </div>
    </li>
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
</ul> 
</div> 
</body>
4

4 に答える 4

2

これは、インラインブロックがあなたの友達であるところです。フロートは使用しないでください。

#navbar {
    text-align: center;
}

#navbar > ul {
    display: inline-block;
    vertical-align: top;
    *display: inline;
    *zoom: 1;
}

編集：フィドルを追加

于 2012-10-09T22:46:01.580 に答える
1

#navbarでfloat：leftを使用すると、marin-left | right：autoトリックを使用できなくなります。また、floatを削除するだけで、＃navbarの幅は100％になりますが、これもオプションではありません。

簡単な解決策：

  1. #navbarからfloatを削除し、＃navbarで固定幅を使用し、左右に自動マージンを設定します。

  2. #navbarからfloatを削除し、＃navbarでdisplay：inline-blockを使用し、その親要素にtext-align：centerを追加します。必要に応じて、text-align：leftを#navbarliに戻します。

  3. #navbarからfloatを削除し、＃navbarのtext-align：centerを使用して#navbarリストアイテムのdisplay：inline-blockを設定します。

于 2012-10-09T22:47:07.573 に答える
0

float: leftを#navbar{} CSSから削除します。次に、背景色を移動したい場合があります: #dee8ff; 子要素に追加し、おそらくパディングを少し調整します。

于 2012-10-09T22:42:33.040 に答える
0

削除float:leftし#navbarて追加width: 1031px; margin:0 auto(幅はサブカテゴリ クラスから取得)

#navbar {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #dee8ff;
width: 1031px;
font-family: Arial, Helvetica, sans-serif;
margin:0 auto
}

デモhttp://jsfiddle.net/KLP8d/

于 2012-10-10T09:41:14.803 に答える