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

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

王林
王林轉載
2023-09-18 10:57:011545瀏覽

我們使用 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刪除