How to use CSS to control the style of an HTML unordered list?

Question

Basically I want to control the margin on the left of the list. Here's how I have it structured:

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

The sub-sections are too far to the right with the current style I'm using. How do I change it?

Pekka · Accepted Answer · 2010-01-31 23:32:22Z

1

My ul "reset" looks something like this:

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

answered Jan 31, 2010 at 23:32

Pekka

451k150 gold badges990 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mark123 · Accepted Answer · 2010-01-31 23:31:15Z

0

You want to remove or at least lessen the margin/padding.

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

This should make it flush with the main section list items, adjust to taste.

answered Jan 31, 2010 at 23:31

mark123

1,0631 gold badge11 silver badges16 bronze badges

Comments

craftsman · Accepted Answer · 2010-01-31 23:36:25Z

0

You need to add class attribute to the sublist:

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

And put this css for it:

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

answered Jan 31, 2010 at 23:36

craftsman

15.7k17 gold badges74 silver badges87 bronze badges

Collectives™ on Stack Overflow

How to use CSS to control the style of an HTML unordered list?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related