ul實現橫向排列不換行的兩種解決方案
阿新 • • 發佈:2019-02-13
剛學前端不久,嘗試著寫各種佈局。今天想實現一個橫向排列的照片列表,於是最先想到的就是利用ul將list-style設定為none。但是這樣只是僅僅將ul預設為橫向排列,並沒有限制ul一定不換行。當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橫向排列不換行的問題了。看來熟悉各種屬性的特點還是很有必要的。