html - 如何使用 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 “reset” 看起来像这样：

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;
}