CSS實現div或ul,li水平對齊不換行

2021-06-27 05:48:08 字數 1594 閱讀 6428

在網頁前端開發中,我們可能會經常用到走馬燈特效,於是乎就需要用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...