水平導航欄問題

我目前正在重新設計一個我管理的網站，而且我遇到了導航欄的問題。它使用高分辨率（我目前使用1440x900）完美運行，但當我切換到較低分辨率時，最後幾個菜單項會被切斷。水平導航欄問題

下面是HTML：

 <body> 

<div id="page-wrap"> 
    <div id="inside"> 


     <div id="header"> 
      <img src="LogoGood.gif" alt="LogoGood" width="591" height="224" /> 



     <div id="nav"> 
<ul> 

    <li><a href="index.html">Home</a></li> 
    <li><a href="writings.html">Writing</a></li> 
    <li><NOBR><a href="media.html">Media Relations</a></NOBR></li> 
    <li><a href="events.html">Events</a></li> 
    <li><NOBR><a href="proofreading.html">Proofreading</a><NOBR></li> 
    <li><NOBR><a href="work.html">Writing Workshops</a></NOBR></li> 
    <li><a href="publications.html">Publications</a></li> 
    <li><a href="About.html">Working With You</a></li> 
    <li><a href="aboutkathy.html">About Kathy Mayer</a></li> 
    <li><a href="contact.html">Contact Kathy</a></li> 
</ul>

和CSS：

#page-wrap { 
background: beige; 
min-width: 780px; 
max-width: 1260px; 
margin: 10px auto; 
} 
#page-wrap #inside { 
    margin: 50px 10px 0px 10px; 
    padding-bottom: 10px; 
} 

    #main-content { 
background: beige; 
padding-left: 50px; 
padding-top: 80px; 

height: 400px;} 


    #header { 
padding-top: 5px; 
background: beige; 
text-align: center;} 

    #nav { 
float: left; 
width: 100%; 
background: beige; 
height: 80px; 
overflow: hidden; 
padding: 0; 
margin: 10px 0 0 0; 
border-bottom: 1px solid rgb(255,23,28);} 

    #nav ul{ 
text-align: center; 
float: left; 
list-style: none; 
padding-left: 13px; 
margin: auto;} 

    #nav li { 
float: left; 
list-style: none;} 


    #nav li a { 
display: block; 
padding: 8px 8px; 
border-right: 1px solid rgb(255,23,28);}

提前感謝！

來源

2011-12-19 Matt Altepeter

我認爲你的代碼不完整，'li'元素的樣式在哪裏？另外，你可以在jsfiddle上發佈一個工作示例嗎？（最好不要使用使用css white-space：nowrap來代替......） – ptriek 2011-12-19 16:16:56

如果元素被切掉，它可能與設置爲隱藏的「overflow」屬性有關。一個可行的例子肯定會有所幫助，但請看一下這個方向。 – 2011-12-19 16:26:33

@FrankParent我刪除了溢出：隱藏CSS並重新加載頁面並更改了我的分辨率。菜單項目在這裏，但在下一行。有任何解決這個問題的方法嗎？ – 2011-12-20 17:40:41

相信這裏的主要問題是菜單項存在的數目和所定義的高度。物品在那裏，但#nav的高度只是80px。對於更寬的屏幕，這不應該是一個問題，但對於分辨率較小的屏幕，菜單將被切斷，特別是在高度已被定義的情況下。其中最重要的一點是，在單個導航欄中包含大量項目肯定會增加其整體寬度。長名稱的鏈接也有助於增加每個li的寬度（例如，與「聯繫」相比，「關於凱西邁耶」與「關於」或「關於我」和「聯繫凱西」相比）。

擺脫此問題的一種方法是創建兩個單獨的導航欄。您可能會在頁面右上角顯示「首頁」，「關於/關於Kathy Mayer」和「聯繫/聯繫Kathy」，使其成爲單獨的導航欄，並將其他導航欄保留在另一個導航欄中，如此你會有兩個不同的導航欄。

另一種方法是製作垂直導航欄，這將消除整個問題。

我剛剛得到的另一個想法：您也可以爲具有相似標題的項目子菜單，如在一個子菜單下列入「Writing」，「校對」和「Workshops」。

我希望我是有幫助的。

來源

2011-12-21 05:39:58 DriftingSteps

您已將#page-wrap設置爲min-width:780px - 但您的菜單比此寬。

http://jsfiddle.net/bbcmF/

嘗試更大的最小寬度：http://jsfiddle.net/bbcmF/1/（或使菜單更小）

來源

2011-12-19 17:08:40 ptriek

更改最小寬度不能解決問題，也不能縮小菜單。使菜單的寬度變小會切斷超出該寬度的其他菜單項。還有其他建議嗎？ – 2011-12-20 06:28:08

水平導航欄問題

回答

相關問題