首頁 > web前端 > css教學 > 主體

css怎麼把縱向排列變成橫向

anonymity
發布: 2019-05-28 14:07:08
原創
12795 人瀏覽過

有兩種方法可以將縱向清單轉換成橫向清單。使用內聯(inline)或浮動(float)的列表項目。

css怎麼把縱向排列變成橫向

這兩種方法都很好,但如果你想連結到具有相同的大小,你必須使用浮動的方法。

內聯清單項目

建立橫向導覽列的方法之一是指定元素,

實例

li{
    display:inline;
}
登入後複製

display :inline; -預設情況下,

  • 元素是區塊元素。在這裡,我們刪除換行符之前和之後每個清單項,以顯示一行。

    浮動清單項目

    在上面的範例中連結有不同的寬度。

    對於所有的連結寬度相等,浮動

  • 元素,並指定為元素的寬度:

    實例

    li{
        float:left;
    }
    a{
        display:block;
        width:60px;
    }
    登入後複製

    float:left - 使用浮動區塊元素的幻燈片彼此相鄰

    display:block - 顯示區塊元素的鏈接,讓整體變為可點擊連結區域(不只是文字),它允許我們指定寬度

    width:60px - 區塊元素預設為最大寬度。我們要指定一個60像素的寬度

    以上是css怎麼把縱向排列變成橫向的詳細內容。更多資訊請關注PHP中文網其他相關文章!

  • 來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    作者最新文章
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!