Как выравнить текст относительно маркеровоанного списка?

Question

[MRcracker]

Здравствуйте! Подскажите, как выравнять текст относительно маркированного списка, как на рисунке?

Answer 1

[Ankhena]

маркированный, маркир

С помощью margin или padding для li.
Для наглядности задайте li background.

А еще проще поставьте картинку background'ом для li

Альтернативное решение: использовать :before.

Comments

[MRcracker]

работает, но если текст в 2 строчки, то верстка не выравнивает картинку

[Ankhena]

MRcracker: еще раз: я не вижу что и куда Вы пишете.
И написала - сделайте вообще "А еще проще поставьте картинку background'ом для li"

[MRcracker]

картинку фоном я поставил, но когда у li текст в 2 строчки, то как сделать чтобы картинка была между этими строками? ваш вариант позволяет сделать так, чтобы картинка была на определенном месте

[Ankhena]

MRcracker: 1. выложите код на https://jsfiddle.net/
2. Нарисуйте как они должны выравниваться, когда 2 или 3 строчки

[MRcracker]

https://habrastorage.org/files/e3e/94b/354/e3e94b3... вот так должна выравниваться картинка, если текст идет в 2 строчки или больше

[MRcracker]

Ankhena W: я видно что-то напутал в коде

[Ankhena]

MRcracker: ну видимо еще флекс и align-items: flex-end, если текст к низу прибивать

Answer 2

[Qzee]

<ul>
  <li><span>Текст</span></li>
</ul>

span {
  vertical-align: sub;
}

Comments

[MRcracker]

Не срабатывает ваше решение проблемы