元素不換行在一行顯示(css中ul不換行的實現方法)

css ul不換行的實現方法:1、設置足夠寬的寬度,然后將li的float屬性設置為left;2、通過“white-space:nowrap;”處理塊元素中的空白符和換行符。

本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。

如何讓ul實現橫向排列不換行的效果

方案一:

設置足夠寬的寬度,然后將li的float屬性設置為left。意思就是使li元素向左浮動排列。代碼如下:

ul{width:2000px;//設置足夠的寬度overflow:hidden;white-space:nowrap;//處理塊元素中的空白符和換行符的,這個屬性保證圖片不換行}li{list-style:none;float:left;//向左排列margin-left:15px;width:130px;}

方案二:

ul{display:block;overflow:hidden;white-space:nowrap;//處理塊元素中的空白符和換行符的,這個屬性保證圖片不換行}li{list-style:none;display:inline-block;//使li對象顯示為一行margin-left:15px;width:130px;}

在上面我們可以看到兩種解決方法都用到了white-space屬性,如果沒有這個屬性就無法完成不換行的效果。通過css手冊可以看出這個屬性是:如何處理元素內的空白。當選擇nowrap時就是文本不會換行,文本會在在同一行上繼續,直到遇到<br>標簽為止。但是用于非文本的元素也可以。

還有就是display屬性。在方案二中如果不設置為inline-block,也無法完成不換行的效果。

inline-block:將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內,允許空格。

inline-block的特點:將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內,允許空格。(準確地說,應用此特性的元素呈現為內聯對象,周圍元素保持在同一行,但可以設置寬度和高度地塊元素的屬性)。

至此就解決了ul橫向排列不換行的問題了?？磥硎煜じ鞣N屬性的特點還是很有必要的。