导航链接具有多个图像以获得流体宽度

Question

我正在尝试使用菜单项创建导航菜单，这些菜单项并不总是具有固定宽度。因此，我尝试使用一种技术，其中<a>元素作为一个背景图像，然后<span>元素中具有不同背景图像的<a>元素。我记得很久以前就看过这种技术了，从内存中回忆它就行不通了。这是我的菜单标记：

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

再详细说明一下，这是我<a>标签上使用的背景图片：

和<span>元素上使用的那个：

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

Answer 1

您需要设置范围的高度和位置＆＃34;

#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
}