在網頁前端開發中，我們可能會經常用到走馬燈特效，於是乎就需要用CSS來實現文字或圖片水平對齊但不換行的效果，用div+table可是很實現這個效果，但是要用div或ul,li來做就難了，大部分人都會想到用overflow:hidden+固定寬度width來控制div或li浮動元素不會換行，但這樣效果很差或根本無效。其實我們只需要用到三個CSS樣式就能搞定它了，它們分別是display:inline-block，overflow:hidden和white-space:nowrap
下面就來分析一下它們的作用：
首先，是overflow:hidden。
overflow:hidden是作用是什么呢？大多數人對這個樣式的理解僅僅局限於隱藏溢出，而對於清除浮動這個含義不是很了解。
一提到清除浮動，我們就會想到另外一個CSS樣式：clear:both，我相信對於這個屬性的理解大家都不成問題的。但是對於“浮動”這個詞到底包含什么樣的含義呢？我們下面來詳細的闡述一下。
<div id="outer">
<div id="inner"></div>
</div>
這是一個常用的div寫法，下面我們來書寫樣式。大家可以在DW中自己做試驗
#outer{ width:500px; background:#000; height:500px;}
#inner{ float:left; width:600px; height:600px; background:red;}
可以看到，我給inner這個id加了一個浮動，我們常規的理解是，我們允許inner這個id的div的右邊出現其他的內容，只要它的寬度不超過outer這個div和inner這個div的剩余值。
如果div outer中還包含其他的div，我不允許它出現在inner的右側，我們則用樣式clear:both指定這個div，不允許它浮動在inner右側。
這些在ie6里面是正確的。但是在火狐或者其他瀏覽器里面，我們發現問題並非如此簡單。我們發現，當inner這個div的寬度和高度都大於wai這個div的時候，outer並沒有被inner撐開而是依舊顯示為我們指定的寬高。在我的例子中，都是500。
這個時候我不理解了，我搜索了很多的資料，但是都沒能理解這是為什么，直到看到別人在類似的情況下給outer這個div加了一個overflow:hidden這個屬性解決了這個問題。
我們直到overflow:hidden這個屬性的作用是隱藏溢出，給outer加上這個屬性后，我們的inner的寬高自動的被隱藏掉了。另外，我們再做一個試驗，將outer這個div的高度值刪除后，我們發現，outer的高度自動的被inner這個div的高度值給撐開了。
說到這里，我們再來理解一下“浮動”這個詞的含義。我們原先的理解是，在一個平面上的浮動，但是通過這個試驗，我們發現，這不僅僅是一個平面上的浮動，而是一個立體的浮動！
這就是overflow:hidden這個屬性清除浮動的准確含義。
其次，是display:inline-block
display:inline-block
簡單來說就是將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，也就是水平對齊但不會換行，而用display:inline 和display:block都實現不了，但是這個屬性目前不是所有的瀏覽器都支持，只有Opera和Safari支持，FireFox3和IE8都會支持，Firefox2和IE使用特殊辦法可以實現這種效果。
最后，是white-space:nowrap
white-space:nowrap本來的用途是讓文本內容不會出現換行，其實它還能用容器(div,ul等)上。在ul上加樣式white-space:nowrap，可以讓其內部的li對象，水平放置而不會換行，跟display:inline-block的作用應該是相輔相承的