首頁 >web前端 >css教學 >css清單怎麼橫著排列

css清單怎麼橫著排列

王林
王林原創
2020-11-16 09:29:3312612瀏覽

css列表橫著排列的方法:可以利用【display:inline】屬性把【

  • 】標籤設定為內聯元素來實現橫向排列效果。 display屬性規定了元素應該產生的框的類型。
  • css清單怎麼橫著排列

    想法:

    設定

  • 標籤的display:inline,把
  • 設定為內嵌元素來實現橫向排列的效果。

    (建議教學:css影片教學

    屬性介紹:

    display 屬性規定元素應該產生的方塊的類型。

    具體程式碼:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>列表横向排列的另一种方法</title>
    <style type="text/css">
    ul li{display:inline;background:#F93; padding:5px;}}
    </style>
    </head>
    
    <body>
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
    </ul>
    </body>
    </html>

    效果:

    css清單怎麼橫著排列

    #問題:

    li之間有空隙

    解決方法:

    把li寫成一行

    <ul>
        <li>Item1</li><li>Item2</li><li>Item3</li><li>Item4</li>
    </ul>

    #:

    css清單怎麼橫著排列

    相關推薦:CSS教學

  • 以上是css清單怎麼橫著排列的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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

    相關文章

    看更多