February 4, 2013

Inline-block, Inline, Block

Question by Zettam

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?

Answer by Starx

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>

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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!