首頁 >web前端 >css教學 >如何控制 CSS 中項目符號和列表項目之間的水平間距?

如何控制 CSS 中項目符號和列表項目之間的水平間距?

Susan Sarandon
Susan Sarandon原創
2024-12-08 18:17:11573瀏覽

How Can I Control the Horizontal Spacing Between Bullets and List Items in CSS?

控制項目符號和

  • 之間的水平間距在CSS 中

    使用有序或無序列表(

      )時,您可能想要修改項目符號在其關聯的
    • 之前佔據的水平空間量。預設情況下,項目符號會建立一致的縮排。但是,您可以根據需要自訂此間距。

      為了解決您的問題,答案在於利用具有相對定位的 span 元素。將內容括在一個範圍內並套用「left」屬性來調整間距。

      li span {
        position: relative;
        left: -10px;  /* Adjust this value to control the spacing */
      }

      例如,要在文字之前創建額外的空間,您可以實現以下內容:

      <ul>
        <li><span>item 1</span></li>
        <li><span>item 2</span></li>
        <li><span>item 3</span></li>
      </ul>

      這種方法允許您微調項目符號和

    • 之間的水平間距。元素,為您的清單設計提供更大的靈活性。
  • 以上是如何控制 CSS 中項目符號和列表項目之間的水平間距?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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