首頁  >  文章  >  web前端  >  css ul 不換行怎麼實現

css ul 不換行怎麼實現

藏色散人
藏色散人原創
2021-04-12 14:35:312922瀏覽

css ul不換行的實作方法:1、設定足夠寬的寬度,然後將li的float屬性設為left;2、透過「white-space:nowrap;」處理區塊元素中的空格符和換行符。

css ul 不換行怎麼實現

本文操作環境: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時就是文字不會換行,文字會在同一行上繼續,直到遇到0c6dc11e160d3b678d68754cc175188a標籤為止。但是用於非文字的元素也可以。

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

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

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

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

【推薦學習:css影片教學

#

以上是css ul 不換行怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn