Make list item fit its contents

Question

I have the following list in HTML:

<ul>
    <li><span class="button">A</span></li>
    <li><span class="button">B</span></li>
    <li><span class="button">C</span></li>
</ul>

The accompanying CSS. Understand that I want to use differently sized buttons for different lists.

.button
{
    background: blue;
    padding: 0.5em;
}

The li's do not expand to fit the spans inside of them. This has the effect of throwing off the margin of the whole list, which will be especially important when I turn the list into a horizontal menu.

Also, the reason I have styled spans inside the li's instead of styling the li's themselves is because some of those spans will actually be links.

Answer 1

This great article is drilling into your problem and showing what a good practise is: http://css-tricks.com/keep-margins-out-of-link-lists

That is, if I understood what you were aiming for, your question could be a bit clearer. :)

Answer 2

You must declare the span as an Blockelement with display:block;

Is it the solution for you?