Как сделать свой стиль буллитов, что он не «залезал» на изображение?

Question

[pavelkey]

Добрый день!
Никак не могу решить проблему с буллитами, которые "залезают" на изображение, если установить обтекание текстом.

В HTML:

<img style="float: left; margin-left: 20px; margin-right: 20px;" src="images/111.jpg">
<ul>
<li>Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст.</li>
<li>Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст.<</li>
</ul>

Пока ничего необычно.
Далее CSS:

ol, ul {
    list-style: none;
}
.content ul li {
    padding-left: 56px;
    position: relative;
    margin-bottom: 1em;
}
.content ul li::before {
    content: "—";
    position: absolute;
    left: 0;
}

Что в принципе тоже ничего необычного. А вот на практике возникает проблема - часть текста с буллитами, которая должна обтекать изображение - отображается некорректно, а буллиты после изображения - корректно.

Подскажите, пожалуйста, в чем может быть проблема?

Comments

[FeST1VaL]

Проблема по сути во float у картинки

[pavelkey]

Артем Будин, а что не так с ним? Текст ведь корректно отображается, а проблема только в ul li, полагаю, но найти не получается.

[pavelkey]

Отображение текста с bedore (для стилизации буллитов) и без:

[FeST1VaL]

pavelkey, по дефолту точки же не псевдо элементы) они картинки по сути

[FeST1VaL]

pavelkey, Короче говоря зачем вам делать ваши псевдоэлементы absolute? убери им и просто дайте отступ от текста и все...

[FeST1VaL]

pavelkey, у вас блок то начинается под картинкой, а вы ставите left: 0;

Вот так у вас примерно:

[pavelkey]

Артем Будин, безгранично вам благодарен!
Убрал absolute и добавил padding-right: 20px, все отлично!



Еще раз спасибо!

Answer 1

[igumenov]