How to set the width of an inline element?

Question

I want to create a tab title. Html code,

<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, also do 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 setting failed, the width / height of the element has not changed.

How can I get the right effect?

Thanks.

Answer 1

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

Block

: The item will be on the same line. In this case, you can set the float so that the links are on the same line;

built-in unit; the element will have a height, width, etc., and several elements will sit on the same line (block).

Answer 2

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

Answer 3

Using

 display: inline-block; 

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

Answer 4

You will need to use display:block at anchor.