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

大家在頁面佈局時有沒有遇到這種情況，讓ul橫向排列時，它會換行，但是這不是我們希望看到的效果，你知道怎麼處理這種情況嗎？這篇文章就和大家聊聊如何讓ul實現橫向排列不換行，有興趣的歡迎閱讀評論。

剛學前端不久，嘗試著寫各種佈局。今天想實現一個橫向排列的照片列表，於是最先想到的就是利用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時就是文字不會換行，文字會在同一行上繼續，直到遇到 5347c3d061f1b90e45639e8ac6d3777b 標籤為止。但是用於非文字的元素也可以。 

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

inline-block：將物件呈現為內嵌對象，但物件的內容作為區塊物件呈現。旁邊的內聯物件會被呈現在同一行內，允許空格。 

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

至此就解決了ul橫向排列不換行的問題了。看來熟悉各種屬性的特徵還是很必要的。

以上是如何讓ul實現橫向排列不換行的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！