Как убрать обтекание текстом картинки при добавлении ее через :before?

Question

[Андрей Жеребцов]

Есть n-количество строк , перед каждой вставлена картинка через :before, текст обтекает картинку. Подскажите как можно убрать обтекание?

li{
            margin-bottom: 4rem;
            &:before {
            content: '';
            display: inline-block;
            width: 2rem;
            height: 2rem;
            background: url(../img/prices/12.jpg) no-repeat center;
            vertical-align: middle;

        }

Comments

[Rustam Bainazarov]

inline-block заменить на block.

[WapSter]

Рустам Байназаров, и не лень же тебе было ради двух свойств заморачиваться с песочницей)

[Rustam Bainazarov]

Тимур Турсунбаев, сам на себя иногда удивляюсь.

[Андрей Жеребцов]

Рустам Байназаров, c block вот так получается

[Rustam Bainazarov]

Андрей Жеребцов, ну да, ясен пень, потому что обтекания нет, как вы и хотели. А если вы хотите чтобы область слева была пустая, то ставьте на absolute вашу картинку, а у всего блока делайте padding-left на ширину иконки. Либо делайте flex-контейнер.

[Андрей Жеребцов]

спасибо.попробую

[Rustam Bainazarov]

Андрей Жеребцов, вариант с flex:

[Rustam Bainazarov]

Андрей Жеребцов, смотрите мой комментарий выше, там готовый пример только что сделал.

Answer 1

[CitizenZ]

Попробуй
float: left; // задаем обтекание
margin: 10px; // отступ для красоты
display: inline; // для IE6, чтоб отступ слева не удвоился