Как использовать 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> 
<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;
}

Answer 3

Вы хотите удалить или, по крайней мере, уменьшить поля / отступы.

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

Это должно привести к тому, что он станет на одном уровне с основными пунктами списка, отрегулируйте по вкусу.