html - 具有多个图像的导航链接以获得流畅的宽度

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

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

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