HTML，CSS导航菜单使用图像

Question

我有一个 78x26 像素的图像，我想将其用作导航栏的按钮。 这样做最合适的方法是什么？

我希望图像在它不存在时保持其原始大小

#navbar li {
    background-image:url("../images/btns.png");
}

我知道我可以做这样的事情，但我又该如何将文本放在图像上

<li><a href="#"><img src="images/btns.png"></a></li>

Answer 1

您还必须指定 <li> 的宽度和高度.请试试这个:

#navbar li {
    background-image:url("../images/btns.png");
    width: 78px;
    height:26px;
}

<li>我相信元素是内联的，因此您必须执行类似这样的操作才能使它们并排显示:

#navbar li {
        background-image:url("../images/btns.png");
        width: 78px;
        height:26px;
        float: left;
    }