怎么讓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時就是文本不會換行，文本會在在同一行上繼續(xù)，直到遇到<br>標簽為止。但是用于非文本的元素也可以。

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

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

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

以上是“怎么讓ul實現橫向排列不換行的效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！