初學者指南：如何控制 ul 和 ol 中項目符號的水平間距
更新日期： 2024 年 10 月 27 日
在學習 HTML 和 CSS 時，許多新手可能會遇到這樣的問題：
如何控制列表項目符號（如 <ul> 中的圓點或 <ol> 中的數字）和列表文本之間的水平距離。
預設情況下，項目符號會給 <li> 內容留出固定的空間，但我們如何更精細地調整這些空間呢？
本篇文章將幫助你了解如何使用 CSS 來控制這些間距。
項目符號與列表文本的間距問題
在默認情況下，HTML 中的無序列表（<ul>）和有序列表（<ol>）都有項目符號（或數字），這些符號會給列表項目留出一段空間，導致列表文本和符號之間有一定的距離。
這樣的默認行為對於許多情況來說是合理的，但有時候我們需要更靈活地控制這些間距。
例如：
- 默認情況：項目符號和文本之間會有固定的空間。
* 項目文本- 自定義間距：希望能夠更改這個間距，使文本更靠近或更遠離項目符號。
* 項目文本要達到這樣的效果，我們可以使用 CSS 來進行精細的控制。
控制項目符號與列表文本的水平間距
要調整列表項目符號和列表文本之間的水平距離，我們可以採取以下幾種方法：
使用 text-indent 調整文本的縮排
最常用的方法是使用 text-indent 來調整列表項目符號和文本之間的距離。
HTML：
<ul class="custom-indent">
<li>項目 1</li>
<li>項目 2</li>
<li>項目 3</li>
</ul>CSS：
.custom-indent {
list-style-position: outside;
}
.custom-indent li {
text-indent: -20px; /* 調整文本與項目符號之間的距離 */
padding-left: 20px; /* 保持項目符號與左側的空間 */
}在這個例子中，我們使用 text-indent 來負向縮排文本，使其更靠近項目符號，同時使用 padding-left 來確保項目符號與左側的距離。
使用自定義標記符號
另一種方法是完全自定義項目符號，這樣可以更精細地控制符號和文本之間的距離。
HTML：
<ul class="custom-marker">
<li><span class="bullet">•</span> 項目 1</li>
<li><span class="bullet">•</span> 項目 2</li>
<li><span class="bullet">•</span> 項目 3</li>
</ul>CSS：
.custom-marker {
list-style: none; /* 隱藏預設的項目符號 */
}
.bullet {
display: inline-block;
margin-right: 10px; /* 調整符號與文本之間的距離 */
}這種方式讓你完全掌控項目符號的位置和樣式，從而實現更靈活的排版。
小結
控制列表項目符號與文本之間的距離對於實現精細的頁面排版非常重要。
通過使用 text-indent 或自定義符號，我們可以靈活地調整項目符號與文本之間的水平空間，從而達到我們想要的效果。
希望這篇文章能幫助你理解如何控制 <ul> 和 <ol> 中項目符號的間距，並在實際開發中靈活應用這些技巧！