純粹使用CSS來間距動態導航項目

我知道我可以使用javascript來實現這一點，但我想知道是否有人有任何明智的想法如何使用純CSS來完成，這樣我就可以避免將會導致的「跳動」效果通過在DOM加載和應用樣式之後執行各種計算或在每個頁面更改上使用加載gif來隱藏它。純粹使用CSS來間距動態導航項目

基本上，導航具有固定的寬度，比如960.該網站是CMS驅動的，因此客戶端可以有2個菜單項或10個菜單項。

enter image description here

理想情況下，我想避免的：菜單項目應根據其中包含的文本的長度和每個菜單項應具有均勻填充像這樣的大小使用表格。我很確定我試圖實現的是不可能的，儘管

來源

2013-02-18 Fraser

移除固定的寬度和增加填充：爲5px 10px的;頂部+底部爲5px，左右間距爲10px。 – 2013-02-18 10:47:19

你需要什麼叫做Flex-Box（靈活盒子）模型。它並未在所有瀏覽器中實現。出於測試目的，是的，你可以繼續使用下面的CSS。

CSS

ul li { 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 
    display: -moz-box; 
    -moz-box-orient: horizontal; 
    display: box; 
    box-orient: horizontal; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1; 
}

您可以在Quick hits with the Flexible Box Model看到基本和高級的例子。

Flexbox的模型佈局

普通盒
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex01.gif.pagespeed.ic.I78_V3_QCI.webp
Flexbox的最後一個
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex02.gif.pagespeed.ic.sSh_w3N6ER.webp
Flexbox的用於最後兩個
http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/flexbox/quick/475x297xflex03.gif.pagespeed.ic.QuC9JhvmNd.webp

來源

2013-02-18 10:47:36

我從來沒有聽說過這個。我會仔細看看的。謝謝！ – Fraser 2013-02-18 10:49:12

當然。但它現在只是現在。 :) – 2013-02-18 10:49:27

@Fraser也增加了截圖。一探究竟。 :) – 2013-02-18 10:51:39

純粹使用CSS來間距動態導航項目

回答

相關問題