У меня есть простая структура HTML (jsfiddle):
<li>
<div class="buttons">
<a href="done"><img src="done.png"></a>
</div>
<div class="owners">
Даня Абрамов и Саша Васильев
</div>
<div class="text">
трали-вали трали-вали трали-вали трали-вали
</div>
</li>
buttons
, owners
и text
имеют display: inline-block
.
Это выглядит отлично, когда text
довольно мало:
Однако по мере роста текста элементы inline-block
расширяются и, в конце концов, падают над линией:
Это уродливо, и я бы хотел этого избежать.
Вместо этого я хочу:
Когда текст слишком велик, чтобы поместиться внутри элемента, я хочу, чтобы он был обернут линиями.
Я попытался установить float: left
на элементы, но не смог заставить его работать.
Каков правильный способ сделать это с помощью HTML и CSS (нет таблиц)?