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

Не могу решить, вроде как тривиальную задачку:
li-a-html.png

Есть меню:
<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 - но все-равно результат не достигнут.
  • Вопрос задан
  • 4733 просмотра
Решения вопроса 2
@IoannGrozny
Front-end разработчик
Ответ написан
Комментировать
@Cath_kb
А если так?
a {
    float: left;
}
span {
    display: block;
    height: 100%;
    overflow: hidden;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
kompi
@kompi
nullstack devoops
a, span {
   display: table-cell;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы