在網頁前端開發中，我們可能會經常用到走馬燈特效，於是乎就需要用css來實現文字或水平對齊但不換行的效果，用div+table可是很實現這個效果，但是要用div或ul,li來做就難了，大部分人都會想到用overflow:hidden+固定寬度width來控制div或li浮動元素不會換行，但這樣效果很差或根本無效。其實我們只需要用到三個css樣式就能搞定它了，它們分別是display:inline-block，overflow:hidden和white-space:nowrap
下面就來分析一下它們的作用：
首先，是overflow:hidden。
overflow:hidden是作用是什麼呢？大多數人對這個樣式的理解僅僅侷限於隱藏溢位，而對於清除浮動這個含義不是很了解。
這是乙個常用的div寫法，下面我們來書寫樣式。大家可以在dw中自己做試驗
#outer
#inner
可以看到，我給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的作用應該是相輔相承的
CSS實現div或ul,li水平對齊不換行
在網頁前端開發中，我們可能會經常用到走馬燈特效，於是乎就需要用css來實現文字或水平對齊但不換行的效果，用div table可是很實現這個效果，但是要用div或ul,li來做就難了，大部分人都會想到用overflow hidden 固定寬度width來控制div或li浮動元素不會換行，但這樣效果很差...
css實現div水平 垂直居中
示例1 chrome33 ie8測試通過 示例2 chrome33 ie8測試通過 示例4 chrome33測試通過，ie8測試不通過，參考 注 對頁面中所有元素應用box sizing border box樣式是為了將padding margin值都計入width height中，即為元素指定的任...
3行Css實現div水平 垂直居中
div 就像下面，只需要給.container三行css規則就可以使它在水平方向和垂直方向均處於居中。container 這個方法適用於所有現代瀏覽器 ie10 chrome瀏覽器，firefox和safari 與 webkit 字首 完整的相容性列表如下 height 450 width 600p...