如何使用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; 
}