使不上浮到下一行一個導航欄調整

實施例在這裏時：http://rakavus.net/pvpguides/navbar.html 使不上浮到下一行一個導航欄調整

當調整Web瀏覽器的東西比Li的長度小，它不應該溢出到下一行，它不應該提供任何溢出滾動條（滾動以查看整個事物的唯一方法應該是底部的網頁滾動條。）

使用overflow：hidden不會產生所需的效果，因爲它會丟棄li其次瀏覽器無法適應整個事情。（看到這個增加溢出：隱藏到裏，然後調整窗口的大小，稍微大於需要，然後慢慢地變小）。

它應該能夠用inline-block完成，但沒有任何方法我一直在努力獲得理想的結果。

2014-02-05 Programmer XYZ

你需要給你的ul容器添加一個寬度。從容器中取出花車離開規則和做，而不是：

#centeredmenu ul { 
    position : relative; 
    width : 840px; 
    margin : 0 auto; 
    overflow: hidden; 
} 

#centeredmenu ul li { 
position : relative; 
float: left; 
}

這是基於你的榜樣編輯 http://jsfiddle.net/ETsR8/

來源

2014-02-05 18:37:21

試試這個：

#centeredmenu > ul 
{ 
    float:none; 
    text-align: center; 
    white-space:nowrap; 
} 

#centeredmenu > ul > li 
{ 
    float: none; 
    display: inline-block; 
}

了很多的CSS。我複製了一個小提琴並附加了一些新的定義。你可以在這裏看到結果：http://jsfiddle.net/NicoO/SpVWV/

來源

2014-02-05 18:34:54

雖然這更接近了，但它在調整大小時會呈現稍微消失的背景問題。 –

封裝整個事情與<table width='900'><tr><td> ... </td></tr></table>這將給它一個固定的寬度從工作。我試過了，它在這裏工作。

例如

<body> 
<table width='900'><tr><td> 
<div id="centeredmenu"> 
<ul> 
... 


... 
<li><a href="arms_warrior_intro.html">Arms</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</td></tr></table> 
</body>

（我認爲這將是很好的更新CSS的流體設計能夠正常工作，..而不是嘗試，並迫使這對一個固定的寬度，但那是你的問題的範圍之外的另一個問題。）

來源

2014-02-05 19:12:21

使不上浮到下一行一個導航欄調整

回答

相關問題