приемы для плавающих элементов в перечисляют элементы
Я пытаюсь создать список инструкции с помощью заказанный списки (ol). Внутри я хочу, чтобы текст для инструкции был пущен в ход оставленный и изображение, показывающее шаг пущенное в ход право.
Я попытался перенести содержание в элементе списка (li) как так:
<ol>
<li><p style="float:left">Follow these instructions</p><img style="float:right" src="[***]" alt="" /></li>
</ol>
Это просто отправляет изображение вне элемента лития. Я попытался добавить очищающееся отделение после двух пущенных в ход элементов в литии, я попытался добавить четкий взлом к самому элементу лития. Я также попробовал вложение p и img элементы в пущенных в ход отделениях.
Это даже возможно? Хотел бы использовать этот способ, но генерирует некоторое другое решение если нет.
1 ответ
Неплавающий контейнер не распознает, что его содержимое имеет ширину или высоту, в результате чего контейнер свернется до минимально допустимой высоты с учетом любых других правил CSS.
Чтобы абзац и изображение были ограничены содержащимся элементом списка, необходимо сделать плавающим как элемент списка, так и родительский упорядоченный список.
Тогда и упорядоченный список, и элементы списка уменьшатся до минимальной ширины, необходимой для презентационной инкапсуляции содержимого. В результате список может получиться слишком тонким. Примените подходящую ширину к упорядоченному списку и элементам списка, чтобы справиться с этим.
Рассмотрите возможность очистки элементов, расположенных непосредственно под упорядоченным списком в DOM, чтобы они не проскальзывали слева или справа от списка.