Навигационные ссылки с несколькими изображениями для ширины жидкости

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
}