css怎么讓ul實現橫向排列不換行的效果？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

網站的建設成都創新互聯專注網站定制,經驗豐富,不做模板,主營網站定制開發.小程序定制開發,H5頁面制作!給你煥然一新的設計體驗!已為成都輕質隔墻板等企業提供專業服務。

剛學前端不久，嘗試著寫各種布局。今天想實現一個橫向排列的照片列表，于是最先想到的就是利用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的特點：將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。(準確地說，應用此特性的元素呈現為內聯對象，周圍元素保持在同一行，但可以設置寬度和高度地塊元素的屬性)。

感謝各位的閱讀！看完上述內容，你們對css怎么讓ul實現橫向排列不換行的效果大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注創新互聯行業資訊頻道。

當前文章：css怎么讓ul實現橫向排列不換行的效果
路徑分享：http://vcdvsql.cn/article2/peihoc.html

成都網站建設公司_創新互聯，為您提供網站營銷、搜索引擎優化、品牌網站設計、微信公眾號、品牌網站建設、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯