html - 链接后面的图片

Question

所以我有一个菜单，上面有一个带文本的按钮，我想在文本后面是一个图像，表明你在页面上，这是代码:

HTML:

<div id="menu">
    <div id="about"><a href="#">About Us</a></div>
</div>

CSS:

a {
    text-decoration:none;
    color: white;
    background: url(images/hover.png);
    width: 100%;
    height: 38px;
}

#about {
    background: url(images/button.png);
    width: 168px;
    height: 51px;
    font-family: Anivers;
    font-size: 20pt;
    text-align: center;
    color: white;
    line-height: 50px;
    vertical-align: middle;
    margin-top: 1%;
}

到目前为止，一切都很好，除了图像只会显示与文本大小对应的高度和宽度。例如，如果我将文本设置为 24pt，它后面的图像会变大，但如果我将它变小，图像就会变小，我不希望这样。那么我该如何阻止它发生呢。我已经到处搜索了，遗憾的是我找不到类似的主题。我希望你可以帮助我 :)。

Answer 1

---

如果我正确理解您的问题，您需要添加 display: block到 <a>元素和集合 height: auto;反而。至于图像，它不应再缩放，为了演示目的，我将图像居中。

DEMO