I am trying to add a backgroung image for a "a" element, but it would only show part of the image ( so if I have Home as value, whatever space home takes that is what is shows of the image, if the value is empty it wont show anything of the image).
我试图添加一个背景图像“a”元素,但它只会显示图像的一部分(如果我家里有价值,无论空间家这就是图像的显示,如果该值为空它不会显示任何图片)。
Despite I have setted up the width and height of the "a" element to display.
尽管我已经设置了要显示的“a”元素的宽度和高度。
Can anybody help me?
有人能帮助我吗?
Code.
代码。
<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;"> </a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;"> </a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;"> </a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;"> </a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;"> </a>
</div>
I am sure is something silly, but I cant find out what.
我肯定是有点傻，但我不知道是什么。
2 个解决方案
#1
4
<a> is an inline element. Inline elements cannot have a set width and height.
You therefore need to change the display mode of the element using the CSS property display.
因此，您需要使用CSS属性显示来更改元素的显示模式。
Use display: block; if you want your elements to be taken out of the flow of text and considered a block (ie.: stacked vertically, one block per line).
使用显示:块;如果你想把你的元素从文本流中取出，并将其视为一个块(即块)。:垂直堆叠，每行一个块。
Use display: inline-block; if you want your element to behave like an inline element position wise but have block-like properties.
使用显示:inline-block;如果您希望您的元素的行为像内联元素的位置，但具有类似块的属性。
Note: inline-block is supported by IE6 on <a>. In IE6, inline-block display style is only supported on elements which has an inline default style.
注意:inline-block由IE6在上支持。在IE6中，内联块显示样式只支持具有内联默认样式的元素。
#2
4
Add display:block; to the anchors (block vs inline-block). Once you do that though, you may need to float:left; the anchors to keep them side-by-side. If you go that route, follow them all up with a clear:both; div.
添加显示:块;到锚(块对内线块)。一旦你这样做了，你可能需要浮动:左;锚把它们并排放在一起。如果你走这条路，跟着他们走，清楚地告诉他们:两者都是;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>
#1
4
<a> is an inline element. Inline elements cannot have a set width and height.
You therefore need to change the display mode of the element using the CSS property display.
因此，您需要使用CSS属性显示来更改元素的显示模式。
Use display: block; if you want your elements to be taken out of the flow of text and considered a block (ie.: stacked vertically, one block per line).
使用显示:块;如果你想把你的元素从文本流中取出，并将其视为一个块(即块)。:垂直堆叠，每行一个块。
Use display: inline-block; if you want your element to behave like an inline element position wise but have block-like properties.
使用显示:inline-block;如果您希望您的元素的行为像内联元素的位置，但具有类似块的属性。
Note: inline-block is supported by IE6 on <a>. In IE6, inline-block display style is only supported on elements which has an inline default style.
注意:inline-block由IE6在上支持。在IE6中，内联块显示样式只支持具有内联默认样式的元素。
#2
4
Add display:block; to the anchors (block vs inline-block). Once you do that though, you may need to float:left; the anchors to keep them side-by-side. If you go that route, follow them all up with a clear:both; div.
添加显示:块;到锚(块对内线块)。一旦你这样做了，你可能需要浮动:左;锚把它们并排放在一起。如果你走这条路，跟着他们走，清楚地告诉他们:两者都是;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>