如何设置内联元素的宽度？ [英] How to set width of a inline element?

问题描述

我想设计一个标签页。 html代码是

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

现在我需要将一个背景图像应用到当前类， $ b

但内联元素a对于此背景图像不够大，因此我调整元素的宽度和高度a。但是调整失败，元素的宽度/高度没有改变。

如何获得正确的效果？

$ b $

要应用宽度，请将css属性display设置为block或inline-块。

块：元素将位于一行。在这种情况下，你可能需要设置float使得链接在同一行;

inline-block;该元素将具有高度，宽度等，并且多个元素将位于同一行（块）中。

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.

解决方案

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).

这篇关于如何设置内联元素的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！