窗口大小調整時，無法將導航欄中的最後一項放到下一行？

嘗試使橫向導航欄具有橫跨整個頁面的等間隔鏈接。我有6個鏈接，所以我認爲每個鏈接的寬度大約爲16.67％，但這不起作用。窗口大小調整時，無法將導航欄中的最後一項放到下一行？

16.5％的作品，直到您調整頁面大小，此時導航欄中的最後一項下降到下一行。有沒有一種方法可以防止這種情況發生，以便它們始終以所有窗口大小爲中心？

有沒有一種方法可以防止用戶調整窗口大小，使鏈接重疊或不能完全顯示？

這裏是到目前爲止我的代碼：

#navbar {margin:0; padding:0; overflow:hidden; width:100%;} 
li  {width:100%} 
li a {padding: 6px 3px; float:left; width:16.5%; text-align:center;} 

<ul id='navbar'> 
<li><a href='#'> 1 </a></li> 
<li><a href='#'> 2 </a></li> 
<li><a href='#'> 3 </a></li> 
<li><a href='#'> 4 </a></li> 
<li><a href='#'> 5 </a></li> 
<li><a href='#'> 6 </a></li> 
</ul>

來源

2011-07-28 Drew

你有沒有嘗試在非小數寬度像剛纔16％？另外，瀏覽器會以不同的方式處理數學運算，其中瀏覽器對您來說是一個問題？ – Sparky

是的，我嘗試了16％，它做同樣的事情。我正在使用Safari 5.我也嘗試過使用5個鏈接，而不是6個，所以我可以做到甚至20％的寬度，但再次無濟於事。 – Drew

請參閱下面的答案。左/右填充是你的問題。 – Sparky

在Safari中，它總是搞砸，直到我刪除你的左/右填充。因爲間距已由寬度和其他CSS確定，所以不需要左/右填充。

JSFiddle

#navbar {margin:0; padding:0; overflow:hidden; width:100%;} 
li  {width:100%} 
li a {padding: 6px 0; float:left; width:16.5%; text-align:center;}

我不知道IE瀏覽器將是高興的分數寬度百分比，那麼試試這個。

JSFiddle

#navbar {margin:0; padding:0; overflow:hidden; width:100%;} 
li  {width:100%} 
li a {padding: 6px 0; float:left; width:16%; text-align:center;}

來源

2011-07-28 17:22:01 Sparky

真棒謝謝...只是爲了將來的參考，爲什麼左/右填充會導致，即使你減少16％，並留下填充？ – Drew

@Drew：您正在添加填充，無論如何，在整個菜單欄上都會增加36個像素的寬度。每個15％，你的菜單欄應該是90％寬。當窗口寬度的10％小於36像素時，您將沒有足夠的空間。請點擊綠色複選標記「接受」我的回答，因爲它解決了您的問題。謝謝。 – Sparky

添加寬度比所有的元素越大#navbar。

來源

2011-07-28 17:08:08 austinbv

窗口大小調整時，無法將導航欄中的最後一項放到下一行？

回答

相關問題