不显示背景图像的元素

Question

我正在尝试为“a”元素添加背景图像，但它只显示图像的一部分（因此，如果我将Home作为值，则无论家中采用的是什么空间，即图像的显示，如果值为空它不会显示任何图像）。

尽管我已经设置了要显示的“a”元素的宽度和高度。

有谁能够帮我？

码。

<div style="width:1200px;height:25px;text-align:left;">
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
</div>

我确信这是愚蠢的，但我不知道是什么。

Answer 1

添加display:block; 到锚（ block vs inline-block ）。 一旦你这样做，你可能需要float:left; 锚点以保持它们并排。 如果你走那条路，那就clear:both;跟着他们clear:both; DIV。

a.box  { float:left; width:100px; height:25px; margin:0 8px; }
.clear { clear:both; }

<a href="#" class="box">Foo</a> 
<a href="#" class="box">Foo</a> 
<a href="#" class="box">Foo</a> 
<div class="clear"></div>

Answer 2

<a>是内联元素。 内联元素不能具有设置的宽度和高度。

因此，您需要使用CSS属性display更改元素的显示模式。

使用display: block; 如果你希望你的元素从文本流中取出并被认为是一个块（即：垂直堆叠，每行一个块）。

使用display: inline-block; 如果你希望你的元素行为像内联元素位置明智，但具有类似块的属性。

注意： IE6在<a>上支持inline-block 。 在IE6中，仅在具有inline默认样式的元素上支持inline-block显示样式。