居中導航欄...

首先讓我道歉問這樣一個新手問題。我試圖在網站上搜索類似的問題/答案，但沒有任何修復工作。所以在這裏：居中導航欄...

我從一個流行的YouTube教程創建了一個水平導航欄，並且讓一切正常工作，除了一個問題：我真的很想將這個導航欄放在包含div的導航中。我知道必須有一個簡單的解決方案，但是對於邊緣的生活來說卻是如此。

我也有關於CSS的另一個問題：爲什麼作者在id標記之前製作了包含ul標記的CSS規則。例如，他爲什麼寫ul＃navMenu而不是#navMenu ul？

這裏的HTML：

<body> 
<div id="wrapper"> 
<div id="header"> <h1>The New Site 
</h1></div> 

<div id="navigation"> 
    <ul id="navMenu"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">hyperlink 2</a> 
     <ul class="sub1"> 
     <li><a href="#">hyperlink 2.1</a></li> 
     <li><a href="#">hyperlink 2.2</a> 
       <ul class="sub2"> 
       <li><a href="#">hyperlink 2.2.1</a></li> 
       <li><a href="#">hyperlink 2.2.2</a></li> 
       <li><a href="#">hyperlink 2.2.3</a></li> 
       </ul> 
     </li> 
     <li><a href="#">hyper link 2.3</a></li>  
     </ul> 
    </li><!--close hyperlink 2 --> 
    <li><a href="#">hyperlink 3</a></li> 
    <li><a href="#">hyperlink 4</a></li> 
    <li><a href="#">hyperlink 5</a></li> 
    <li><a href="#">hyperlink 6</a></li> 
    </ul><!--close main ul – navMenu --> 

</div><!--close of navigation --> 

<div id="main-text"> Etc........

而這裏的CSS：*注：我不得不把一個。在所有ul＃mainNave規則之前，以便它們顯示出來。

.* { 
    margin: 0px; 
    padding: 0px; 
} 

.body { 
    background-color:#FF9; 
} 

#wrapper { 
    width: 1000px; 
    margin: 0px auto; 
    padding: 0px; 
    background-color:#FCC; 
} 

#header { 
    margin: 0px; 
    padding: 0; 
    width: 100%; 
    height: 100px; 
    float: left; 
    background-color:#FEA601; 
} 

#navigation { 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 50px; 

    float: left; 
    vertical-align: middle; 
    background-color:#7979FF; 
} 

/*CSS for navigation hyperlinks*/ 


#navigation { 
    margin: 0 auto; 
} 

.ul#navMenu { 
    list-style-type: none; 

} 


.ul#navMenu, ul.sub1, ul.sub2 { 
    list-style-type: none; 

    font-size: 10pt; 

} 

.ul#navMenu li { 

    width: 135px; 
    text-align: center; 
    position: relative; 
    float: left; 
    margin-right: 4px; 
} 

.ul#navMenu a { 
    text-decoration: none; 
    display: block; 
    width: 135px; 
    height: 25; 
    line-height: 25px; 
    background-color: #000; 
    border: 1px solid #FFF; 
    border-radius: 0px; 
    color:#FFF; 
} 

.ul#navMenu .sub1 a { 
    margin-top: 0px; 
} 

.ul#navMenu .sub1 li { 

} 

.ul#navMenu .sub2 a { 
    margin-left: 0px; 
} 
.ul#navMenu li:hover > a { 
    background-color:#666; 
} 

.ul#navMenu li:hover a:hover { 
    background-color: #666; 
} 

.ul#navMenu ul.sub1 { 
    display: none; 
    position: absolute; 
    top: 26px; 
    left: 0px; 
} 

.ul#navMenu ul.sub2 { 
    display: none; 
    position: absolute; 
    top: 0px; 
    left: 137px; 
} 

.ul#navMenu li:hover .sub1 { 
    display: block; 
} 

.ul#navMenu .sub1 li:hover .sub2 { 
    display: block; 
} 

/*end of navigation rules*/ 

/*Body rules*/ 

#main-text { 
    background-color:#FEC94B; 
    width: 970px; 
    Padding: 15px; 
    Height: auto; 
    float: left; 
} 

#footer { 
    width: 100%; 
    float: left; 
    height: 50px; 
    line-height: 50px; 
    background-color: #000; 
    color: #FFF; 
    text-align: center; 
    font-size: 10px; 
} 
#wrapper #navigation #navMenu { 
    text-align: center; 
}

非常感謝你提前，我非常期待解決這個問題。

道格

編輯：我不知道自己做錯了什麼，但有很多的CSS代碼中並沒有露面 - 這一切都始於UL＃navMenu ....而它們恰巧是我的問題的一部分爲什麼作者正在編寫這樣的CCS代碼。

JSFIDDLE

來源

2014-02-22 user3341014

'ul＃navMenu'的意思是帶標識的導航navMenu – sopanha

@ user3286390你能澄清一下，如果你試圖將#navMenu或它包含的項目居中放置在點擊位置嗎？ –

哇！謝謝你所有的答覆。我希望整個導航欄位於頁面中間，當然它們各自的下拉按鈕可以正確對齊。 – user3341014

它不是在此刻集中的原因是在你的CSS，在這裏：

ul#navMenu li { 
    ... 
    float: left; 
}

將其更改爲inline-block的，就像這樣：

ul#navMenu li { 
    display: inline-block; 
    /* old IE hack to get inline-block to work */ 
    zoom: 1; 
    *display: inline; 
}

將text-align添加到容器中：

ul#navMenu { 
    ... 
    text-align: center; 
}

而這將允許他們居中，而不是強迫他們離開。確保父容器上有text-align: center;。

參見updated jsFiddle

最後，CSS選擇：

ul#navMenu - 選擇具有的navMenu
#navMenu ul該ID的UL - 選擇了ul那就是子的的元件與編號爲navMenu
ul#navMenu - 確保它只處理任何ul個元素與navMenu ID，但也可以簡單地#navMenu
ul#navMenu li寫 - 選擇是與navMenu該ID的UL的孩子的所有li元素 - 也可以寫成#navMenu li，因爲一個ID只能出現一次在頁面上。

來源

2014-02-22 15:55:17

絕對美妙 - 像魅力一樣工作！我花費了數小時的時間在這方面停滯不前，而且終於能夠通過它感覺很棒。非常感謝你的幫助：-） – user3341014

居中導航欄...

回答

相關問題