響應式導航 - 從一行到三行 - 列？

Question

當使用標準<nav> & <ul>很容易創建在一行顯示導航：

桌面：http://jsfiddle.net/Baumr/Be9ma/1/

由於這是一個響應佈局，在較小的顯示器，導航將通過媒體查詢（未在代碼中顯示）收縮爲3列（甚至可能爲2）：

手機：http://jsfiddle.net/Baumr/Be9ma/

但它並不美觀間隔：

由於nav li元素的寬度33.3333％，那麼間距搞砸了 - 有些導航項都長，一些短。但是間距不是流體。

如何調整每列的寬度與最寬元素+填充/邊距一樣寬？也就是說，沒有分離或嵌套ul out - 這會破壞語義，並在寬屏幕上查看。

下面是簡單的HTML：

<nav> 
    <ul> 
    <li>Home</li> 
    <li>Very Long Link</li> 
    <li>Blog</li> 
    <li>About</li> 
    <li>Also Long Link</li> 
    <li>Email</li> 
    </ul> 
</nav>​ 

而這裏的相關CSS：

nav { 
    clear: both; 
    background: pink; 
} 

    nav ul { 
     padding: 20px 10px 0 30px; 
     margin: 0; 
     overflow: hidden; 
     font-size: 16px; 
    } 

    nav li { 
     font-variant: small-caps; 
     text-decoration: underline; 
     list-style: none; 
     display: block; 
     float: left; 
     padding: 0 0 30px 0; 
     margin: 0; 
     width: 33.33333%; 
     float: left; 
} 

好奇聽聽你的想法。先謝謝你！

P.S.我想強調跨瀏覽器兼容性和語義。

Answer 1

添加一些@media查詢爲手機。

http://jsfiddle.net/bf9cB/
你需要打開/收縮中央橫條看到的變化

@media only screen and (max-width: 480px) { 
    nav li { max-width:160px; text-align:center } /* This would only allow 3 to fit */ 
} 

@media only screen and (max-width: 320px) { 
    nav li { max-width:106px; text-align:center } 
} 

投注字體大小將是一個因素，在320像素寬（僅供參考）。 您的問題讓我想起最近讀到的一本書："Mobile First"。簡而言之：在移動設備上開始構建，然後從那裏開始工作。 Def值得檢查。