CODEWITHSUNDEEP
htmlcsshtml-lists
AJM
AJM

Reputation: 655

Make list item fit its contents

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.

Upvotes: 2

Views: 8417

Answers (2)

red
red

Reputation: 2050

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. :)

Upvotes: 7

Peter
Peter

Reputation: 683

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

Is it the solution for you?

Upvotes: 3

Related Questions