简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

css清單怎麼橫著排列

王林
發布： 2020-11-16 09:29:33
原創
12554 人瀏覽過

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中文網其他相關文章！

    相關標籤：
    css 清單
    來源：php.cn
    上一篇：css檔引用圖片不顯示怎麼辦 下一篇：css怎麼能讓字等距分開
    本網站聲明
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    作者最新文章
    最新問題
    關於CSS心智圖的課件在哪？ 課件
    來自於 2024-04-16 10:10:18
    0
    0
    1335
    頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
    來自於 2024-04-06 21:58:04
    0
    1
    800
    動態修改Javafx中的內嵌CSS樣式 我試圖在應用程式最大化時更改窗格的背景圖像。我的背景是使用內嵌css設定的。我為樣式設定了兩個不同的變數和一個if語句。但是，我沒有運氣讓它改變樣式。 StringcssStyle...
    來自於 2024-04-06 20:57:16
    0
    1
    487
    如何在 CSS 中使浮動元素垂直堆疊而不是水平堆疊？ 我正在嘗試製作一個包含兩列的網頁，一側具有主要內容，另一側具有額外的內容。但是因為我使用浮動屬性將額外的列向左對齊，所以它水平堆疊，但我希望它垂直堆疊。我目前的程式碼：.topic...
    來自於 2024-04-06 20:45:26
    0
    2
    386
    有沒有辦法強制彈性框中的文字垂直居中，無論我們有什麼其他 CSS 程式碼？ 我有以下CSS程式碼，它是我正在開發的網站中使用的更大CSS程式碼的一部分：.cards-u{display:flex;flex-wrap:wrap;justify-content...
    來自於 2024-04-06 20:41:51
    0
    1
    518
    相關專題
    更多>
    熱門推薦
    熱門教學
    更多>
    相關教學
    熱門推薦
    最新課程
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！