我们经常会用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的。统一顶部对齐会好看些。
就是这些了。。