首頁 > web前端 > html教學 > 如何在HTML中建立清單項目符號和文字之間的間距?

如何在HTML中建立清單項目符號和文字之間的間距?

王林
發布: 2023-09-18 10:57:01
轉載
1544 人瀏覽過

我們使用 CSS padding-left 屬性,在項目符號和文字之間建立一個空格。它用於設定元素左側的填充區域。

HTML支援有序列表、無序列表和HTML支援有序列表、無序列表,我們必須使用

    標籤,在HTML中建立無序列表。
      標籤定義了無序列表。我們使用
    • 標籤開始專案清單。

      對於有序列表,我們必須使用

        標籤,在HTML中建立無序列表。

          標籤定義了有序列表。我們使用
        1. 標籤開始列出專案。

          如何在HTML中建立清單項目符號和文字之間的間距?

          文法

          以下是在清單項目符號和 HTML 文字之間建立空格的語法。

          padding-left: value in pixels;
          
          登入後複製

          範例 1

          以下是在HTML中建立清單項目符號和文字之間新增間距的範例。

          <!DOCTYPE html>
          <html>
          <head>
             <meta charset="UTF-8">
             <meta http-equiv="X-UA-Compatible" content="IE=edge">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
          </head>
          <body>
             <ul >
                <li style="padding-left: 30px">Abdul</li>
                <li style="padding-left: 30px">Jason</li>
                <li style="padding-left: 30px">Yadav</li>
             </ul>
          </body>
          </html>
          
          登入後複製

          以下是上述範例程式的輸出。

          範例 2

          另一個在 HTML 中的清單項目符號和文字之間建立空格的範例 -

          <!DOCTYPE html>
          <html>
          <head>
             <title>HTML Lists</title>
          </head>
          <body>
             <h1>Developed Countries</h1>
             <p>The list of developed countries:</p>
             <ul style="list-style-type:disc">
                <li style="padding-left:1em">US</li>
                <li>Australia</li>
                <li>New Zealand</li>
             </ul>
          </body>
          </html>
          
          登入後複製

        以上是如何在HTML中建立清單項目符號和文字之間的間距?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

      1. 來源:tutorialspoint.com
        本網站聲明
        本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
        熱門教學
        更多>
        最新下載
        更多>
        網站特效
        網站源碼
        網站素材
        前端模板