Как сделать блок, занимающий оставшуюся ширину родителя?

Question

[Павел Мышкин]

Не могу решить, вроде как тривиальную задачку:


Есть меню:

<ul>
    <li><a href="">xxx</a><span></span></li>
    <li><a href="">xxxxxxx</a><span></span></li>
    <li><a href="">xxx</a><span></span></li>
</ul>

li - ограничено по ширине
a - ширина в зависимости от содержимого
span (или другой тег) - оставшаяся ширина, и в этом теге будет бэкграунд, растягивающийся на оставшуюся ширину

widthSpan = widthLi - widthA
Но хочу решить с помощью css - никак не выходит.

Вот нерабочий исходник:

<ul>
    <li><a href="">12345</a><span></span></li>
    <li><a href="">1234567890</a><span></span></li>
    <li><a href="">123</a><span>тут видно бэк, но ширина = контенту</span></li>
</ul>
<style>
li {
    width: 400px;
    height: 40px;
    background-color: #D8D8D8;
    padding: 10px;
    list-style: none;
    border-bottom: 1px solid #fff; 
}
a {
    line-height: 40px;
}
span {
    width: 100%;
    height: 40px;
    background-color: #4A90E2;
}
</style>

Уверен, что кто-нибудь сталкивался с такой проблемой и решил ее. Я пока не могу, уже залез в display: table-cell - но все-равно результат не достигнут.

Answer 1

[Иван Беленков]

jsfiddle.net/G3HPP/1

Answer 2

[Cath_kb]

А если так?

a {
    float: left;
}
span {
    display: block;
    height: 100%;
    overflow: hidden;
}

Answer 3

[kompi]

a, span {
   display: table-cell;
}

Comments

[Павел Мышкин]

Уже делал, не помогло, но перепроверил - РАБОТАЕТ - просто я в сафари тестил .... не фурычит в сафарях .... буду хак искать.

[kompi]

В лисе и хроме под линукс работает.

[kompi]

Возможно, требуется воспроизветси всю цепочку table -> table-row -> table-cell

[Павел Мышкин]

Нет, тогда все ссылки становятся одинаковой ширины, по ширине максимальной ячейки ... тогда прийдется добавить еще контейнер. LI (table) DIV (table-row) A,SPAN (table-cell)

[kompi]

Или проще сразу сделать через тэг table

[Павел Мышкин]

li - более семантически