трюки для плавающих элементов внутри элементов списка

Question

Я пытаюсь создать список инструкций, используя упорядоченные списки (ol). Внутри я хочу, чтобы текст для инструкции плавал слева, а изображение показывало шаг, плавающий вправо.

Я попытался обертывание содержимого внутри элемента списка (LI) вот так:

<ol> 
     <li><p style="float:left">Follow these instructions</p><img style="float:right" src="[***]" alt="" /></li> 
    </ol> 

Это просто посылает изображение вне элемента Li. Я попытался добавить очищающий div после двух плавающих элементов внутри li, я попытался добавить явный взломать элемент li. Я также попытался вложить элементы p и img внутри плавающих div.

Возможно ли это? Хотелось бы использовать этот способ, но будет генерировать другое решение, если нет.

Answer 1

Неплавающий контейнер не будет распознавать его содержимое как имеющее и ширину или высоту, в результате чего контейнер упадет до минимально допустимой высоты с учетом любых других правил CSS.

Для того чтобы абзац и изображение ограничивались содержащим элементом списка, вам необходимо будет поплавать как с элементом списка, так и с родительским упорядоченным списком.

И упорядоченный список, и элементы списка будут уменьшены до минимальной ширины, необходимой для инкапсуляции содержимого. Это может привести к чрезмерно тонкому списку. Примените подходящую ширину к упорядоченному списку и элементам списка, чтобы справиться с этим.

Рассмотрите возможность очистки любых элементов, находящихся непосредственно под упорядоченным списком в DOM, чтобы убедиться, что они не скользят слева или справа от списка.

Answer 2

<ol> 
    <li> 
    <div> 
     <p style="float:left">Follow these instructions</p> 
     <img style="float:right" src="[***]" alt="" /> 
    </div> 
    </li> 
</ol> 

Попробуйте это, это мне помогло.

Answer 3

Вы также можете рассмотреть возможность использования overflow: hiddentechnique; добавив overflow: hidden к вашему li, он будет расширяться, чтобы содержать плавающий контент.

jsFiddle here.