How to set width of a inline element?

Question

I want to design a tab header. The html code is,

<div class="tab-header">
    <a href="" class="current">tab1-title</a>
    <a href="">tab2-title</a>
</div>

Now I need to apply a background image to the current class, too make effect like this,

But the inline element a is not big enough for this background image, so I adjust the width and height of the element a. But the adjustment failed, the width/height of the element did not change.

How could I get the right effect?

Thanks.

Answer 1

To apply width, set css property 'display' to either 'block' or 'inline-block'.

block: the element will sit in a single line. In such case you may want to set float so links are in the same line;

inline-block; the element will have height, width, etc, and multiple elements will sit in the same line (block).

Answer 2

Set the display property to inline-block, and then you can set the width, height, and vertical-align as necessary.

Answer 3

Use

display: inline-block;

on the inline element. With a little tweaking, this has wide cross-browser support and is incredibly useful for the kind of layout you're after.

Answer 4

You'll have to use display:block on the anchor.