如何使用CSS來控制HTML無序列表的樣式？

Question

基本上我想控制列表左邊的邊距。以下是我的結構：

<li> 
<a href="http://link.com">Main</a> 
<ul> 
    <li> 
     <a href="http://link.com" title="">Sub1</a> 
    </li> 
    <li> 
     <a href="http://link.com" title="">Sub2</a> 
    </li> 
</ul> 
</li> 

對於我正在使用的當前樣式，子部分太靠右了。我該如何改變它？

Answer 1

我UL 「復位」 看起來是這樣的：

ul { list-style-type: none; margin: 0; padding: 0 } 

Answer 2

您想刪除或至少減少邊距/填充。

li ul { padding: 0; margin: 0 } 
li ul li { padding: 0; margin: 0; } 

這應該使它與主要部分列表項目齊平，適應口味。

Answer 3

您需要的類屬性添加到子列表：

<li> 
<a href="http://link.com">Main</a> 
<ul class="sublist"> 
    <li> 
     <a href="http://link.com" title="">Sub1</a> 
    </li> 
    <li> 
     <a href="http://link.com" title="">Sub2</a> 
    </li> 
</ul> 
</li> 

，並把這個CSS吧：

ul.sublist{ 
    margin-left:20px; 
}