CSS讓每個li開頭對齊 在使用無序列表(ul)或有序列表(ol)時，我們通常會用列表項(li)來創建項目。但是，在使用列表時，我們可能會遇到每個li的文本內容長度不一，使得這些文本內容看起來有些不整齊，有點雜亂無章。如果想讓每個li的開頭對齊，使用CSS是一個很好的選擇。 下面我們來看看如何使用CSS讓每個li的開頭對齊： 第一步：創建HTML列表 在HTML中創建ul或ol列表，填充幾個li列表項。如下所示：

<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>橙子</li>
<li>菠蘿</li>
<li>葡萄</li>
</ul>

我們假設每個li項的文本內容長度不一致。 第二步：設置CSS樣式 我們需要為頂層ul或ol元素添加一些CSS樣式，以改變每個li的縮進和文本對齊方式。如下所示：

ul, ol {
padding: 0;
margin: 0;
}
ul li, ol li {
margin-bottom: 10px;
text-indent: -2em; /*使用負值，使li項的內容往左移到更多的空間中*/
padding-left: 2em; /*補償li項的內容，使其看起來仍然在它的位置*/
}

ul, ol的padding和margin被設置為0，以便取消默認縮進和邊距。接下來，我們對每個li元素添加CSS樣式。我們增加一個負的text-indent值，使在每個li前面的整個寬度變小了。同時，為了補償text-indent的負值，我們添加了一個padding-left值。 第三步：效果預覽 現在，我們的每個li開頭都被對齊了。可以看看下面的演示：

• 蘋果
• 香蕉
• 橙子
• 菠蘿
• 葡萄

效果預覽： 蘋果 香蕉 橙子 菠蘿 葡萄 就像我們所期望的那樣，每個li的開頭對齊了，使得整個列表看起來更整齊、更美觀。 總結 使用CSS可以輕松地讓每個li的開頭對齊，只要調整text-indent和padding-left值就可以了。這是一個簡單而有效的技巧，可以讓你的列表更加清晰易讀。如果你想讓你的網站更加專業和整潔，那么使用這個技巧肯定是個好選擇。