Почему элемент списка собирается в изображение?

Question

Зачем переходить к потоку изображения

Это код:

    <p><img class="left" width="95" height="64" src="#" />
    some text here some text here some text here some text here some text here some text here
    </p>

    <ul>
       <li>some text here some text here some text here some text here some text here some text here some text here
      </li>
    </ul>

Answer 1

Возможно, потому что

• изображение float: left

• либо <ul> или <li>, либо оба display: inline

Полагаю, вы хотите оставить левую часть изображения. Чтобы получить <ul> на свою собственную линию, Вы могли бы дать ему display: block; clear: left; чтобы разобраться.

Answer 2

потому что вы плаваете изображение слева. Вот что происходит. Пуля находится за картинкой.

Answer 3

Если у вас есть контроль над классом .left, добавьте отступы или поля справа от изображения.

.left {float:left;padding-right:2em;}

или

.left {float:left;margin-right:2em;}

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

Какой из padding-right или margin-right использовать, зависит от того, что еще происходит на странице, какой браузер (ы) вы используете, а также от личных предпочтений. Попробуйте каждый и посмотрите, какой из них лучше работает в вашей ситуации.

Answer 4

Удалить class = "left":)

Answer 5

Предположительно, потому что набор правил CSS, который применяется к элементу, включает в себя правило float: left