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; 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;。

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

不显示背景图像的元素

2 个答案: