Inline-block, Inline, Block

Question

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?

Starx · Accepted Answer · 2013-02-04 01:41:06Z

2

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");
}

answered Feb 4, 2013 at 1:41

Starx

79.3k50 gold badges187 silver badges266 bronze badges

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

2 Comments

Mia Over a year ago

Oh that looks like a good solution, but, is there any way witout needing to change the hierarchy? I can switch to 'ul' and 'li' items but creating a whole new system with href content will be a lot of work..

Starx Over a year ago

@Zettam, Since you want to apply the background to the content, you need an inline element or similar to make it behave like it.

belens · Accepted Answer · 2013-02-04 03:05:21Z

1

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/

answered Feb 4, 2013 at 3:05

belens

9621 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

Inline-block, Inline, Block

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related