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

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

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

jsFiddle здесь .

Answer 2

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

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

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

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

Answer 3

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

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