導航欄包裝在較小的分辨率

我試圖在HTML5/CSS3作爲一個學習過程，但我努力創建一個導航欄，以鏈接到我的網頁上的其他部分。我修改了教程中找到的代碼，它的工作原理是，但只有在1080p分辨率下查看時，如果寬度較小，則條紋會覆蓋其他線條。導航欄包裝在較小的分辨率

無論用戶使用何種分辨率，我如何確保導航欄只佔用一行（縮小到適合）？

下面是導航欄我的CSS代碼。請注意，在導航下，我將寬度設置爲33.3％，填充爲相同以便按鈕居中。我不知道這是否是原因。

nav { 
    display:block; 
    position: absolute; 
    left:0; 
    white-space:nowrap; 
    margin: 0 auto; 
    width: 33.3%; 
    background-color:#ff6600; 
    padding-left: 33.3%; 
    padding-right: 33.3%; 
} 

nav ul { 
    margin: 0 auto; 
    width: 100%; 
    list-style: none; 
    display: inline; 
    white-space:nowrap; 
} 

nav ul li { 
    float: left; 
    position: relative; 
    white-space:nowrap; 
} 

nav ul li a { 
    display: block; 
    margin: 0 auto; 
    width: 150px; 
    font-size: 16px; 
    font-family: century gothic; 
    line-height: 44px; 
    text-align: center; 
    text-decoration: none; 
    color:#575757; 
    white-space:nowrap; 
} 

nav ul ul { 
    width: 200px; 
    position:absolute; 
    top:-99999px; 
    left:0; 
    opacity: 0; 
    -webkit-transition: opacity .4s ease-in-out; 
    -moz-transition: opacity .4s ease-in-out; 
    -o-transition: opacity .4s ease-in-out; 
    transition: opacity .4s ease-in-out; 
    z-index:497; 
    background:#333; 
    padding: 2px; 
    border:1px solid #444; 
    border-top:none; 
    box-shadow:#111 0 3px 4px; 
} 


nav ul ul li a { 
    display: block; 
    width: 200px; 
    text-align: left; 
    padding-left: 3px; 
    font-size: 14px;  
} 



nav ul li:hover>ul{ 
    opacity: 1; 
    position:absolute; 
    top:98%; 
    left:0; 

} 


nav ul li a:hover { 
    color: #fff; 
    background-color: #cc3300 
} 

nav ul li.selected a { 
    color: #fff; 
    background-color: #cc3300; 
}

來源

2012-07-30 user1563865

你幾乎做得正確。與您的CSS問題是，white-space: nowrap;只適用於inline元素 - 但您使用float。即使將display: inline;屬性設置爲這樣的元素（它不會被應用），浮動元素也會成爲塊級別。所以 - 如果你display: inline-block;更換你的花車 - 你white-space屬性將工作:)

的inline-block S和white-space在這裏可以看到一個活生生的例子：http://jsfiddle.net/skip405/wzgcH/

至於你的定心加工方法 - 有一個更好的解決方案。（您可以刪除padding並設置適當的寬度）特別是如果您使用內嵌塊。只需在他們的家長上設置text-align: center; - 並且您將其居中。

來源

2012-07-30 20:13:33 skip405

非常感謝你，虐待這個嘗試 – user1563865 2012-07-31 09:06:32

它適用於菜單隻有一個級別。嵌套的'ul'不是。 – Moesio 2014-09-01 11:03:15

問題是你設置的nav寬度僅僅是33.3％，剩下的就是填充。當允許的小空間經過某個點的調整大小時，會將所有元素推到彼此的下面。要阻止這種情況發生，您可以做兩件事，將導航寬度設置爲100％，其次，如果您不希望它調整大小，那麼您必須給它一個min-width，其總和爲a元素的寬度放在一起。除非您使用響應式設計，否則您最好也應該給它一個max-width。這裏有一個演示，我把你的修改後的css放在一起：http://jsfiddle.net/c3HE6/

來源

2012-07-30 19:59:58

謝謝保羅生病了。歡呼聲 – user1563865 2012-07-31 09:07:45

導航欄包裝在較小的分辨率

回答

相關問題