CODEWITHSUNDEEP
htmlcss
Mia
Mia

Reputation: 6531

Inline-block, Inline, Block

I've been searching about CSS lately, trying to teach myself the tricks. One another issue I've encountered is directly related to the display: attribute.

I've been trying to get the width of the background element for my "menu buttons" as wide as the text they contain. The buttons are simply <div> elements.

When I use display:block; all of their width appear as wide as the longest item, and when I set it to display:inline; or display:inline-block they simply appear on the same line, just like how an inline element works.

Now, what I'm wondering is, how can I make them appear like a list, but still make the background color only as long as the text it contains?

Upvotes: 1

Views: 331

Answers (2)

belens
belens

Reputation: 962

If you want keep the format, have them wrap around the text and have a line for each item the inline-block or inline isn't an option. You'll have to use floats.

You can force each element on a seperate line by floating your items "float:left;" and forcing the floated elements on other lines with clear:both;

.item{
float:left;
clear:both;
}

Here's an example: http://jsfiddle.net/Bn9Qx/

Upvotes: 1

Starx
Starx

Reputation: 78971

Use a markup structure like this

<ul id="menu">
<!-- By the use of UL you can have the menu displayed as list -->
    <li><a href="#">Home</a></li>
    ...
</ul>

And apply the background CSS on the #menu li a

#menu li a {
    /* a (anchor tag) is an inline tag, so the background 
    will span up to its content only */

    background: url("../src/to/img.jpg");
}

Upvotes: 2

Related Questions