具有流动宽度的多个图像的导航链接

Question

我正在尝试创建一个导航菜单，其中的菜单项并不总是具有固定宽度。因此，我尝试使用一种技术，将 元素作为一个背景图像，然后将 元素作为背景图像。 具有不同的背景图像。我记得很久以前就看到过这个技巧，但凭记忆回忆却行不通。这是我的菜单标记：

<div id="nav">
    <ul>
        <li>
            <a href="">Home<span></span></a>
        </li>
    </ul>
</div>

到目前为止我的 CSS：

#nav {
    height: 35px;
    width: 942px;
    background: url('images/nav_bg.png');
    border: 1px solid #74818c;
    border-radius: 3px;
}

#nav ul li a {
    display: inline-block;
    background: url('images/nav_button_left_idle.png');
    line-height: 32px;

}

#nav ul li a span {
    display: inline-block;
    background: url('images/nav_button_right_idle.png');
    line-height: 32px;
    width: 5px;
}

详细说明一下，这是我的 标签上使用的背景图像：

以及 元素上使用的 alt：

任何帮助将不胜感激，谢谢！

Answer 1

您需要设置跨度的高度和位置”

#nav ul li a {
    display: inline-block;
    background: url('images/nav_button_left_idle.png');
    line-height: 32px;
    position:relative;
}

#nav ul li a span {
    display: inline-block;
    background: url('images/nav_button_right_idle.png');
    height: 32px;
    width: 5px;
    position:absolute;
    top: 0;
    right: 0
}