我們經常會用ul, li來制作菜單，讓li排成一行當然不是什么難事，比較常見的是讓li浮動。然后給ul設置一個比較大的寬度，以確保li不會把ul"撐破"。
這樣做固然可以，但不是很好。首先，有浮動就要清除浮動。其次，我們必須給UL的寬度預設一個比較大的值。
這里要介紹另一種方法，通過display:inline-block和white-space:nowrap來實現同樣的效果。
形如下面的DOM，怎樣讓它們乖乖的排成漂亮的菜單。
1 <ul class="menu"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li></ul>
我們可以這么做：
1 <style> 2 ul,ol,li{margin:0;padding:0;} 3 li{list-style:none;} 4 5 .menu{display:inline-block;white-space:nowrap;*display:inline;} 6 .menu li{display:inline-block;vertical-align:top;*display:inline;*zoom:1;margin:0 2px 0 0;} 7 </style>
黃底的文字是屬於reset的部分，先把ul, li一些默認樣式重置。這個，大家都知道哈。
紅色的文字就是關鍵部分了，不可或缺哦。
我們知道，block的元素的寬度，如果沒有賦值，就會等於父元素的寬度。如果我們需要ul被自己的內容，也就是里面的li撐開，就要將其設為inline-block。
white-space:nowrap當然就是強制li不要換行啦。
li當然也要設置為inline-block，這樣才能保證其既能設置寬高，又能和諧的共處一行。
到這里，對於大部分morden的browser(Firefox, IE8+, Chrome...)，已經足夠了。
但是，IE7還是不買帳的。(IE6？提它我跟你急！不過我這個方法對於IE6應該是同樣有效的啦)
原因就在於：對於塊元素設置inline-block，在IE7下是無效的。
所以我們只能用那個耳熟能詳的老hack：設為inline。
可是，問題又來了，inline的元素是無法設置寬高的。該死的hasLayout啊！
用上zoom:1，激發出hasLayout，這下，終於都搞定了。
至於vertial-align:top。是這樣的：inline-block的元素默認是vertical-align:baseline的。統一頂部對齊會好看些。
就是這些了。。