Вторая строка в li начинается под пулей после CSS- reset

У меня возникли проблемы с моим ul -list после использования CSS- reset.

Когда текст в li длинный, и он перерывается во вторую строку, текст начинается под маркой. Я хотел бы, чтобы он начинался с того же поля/дополнения, что и текст на правой стороне пули.

Сорт трудно объяснить, но если вы посмотрите на пример-образ. Левое изображение - это список сегодня. "motta varsel [...]" начинается под пулей, но я хотел бы, чтобы он смотрел изображение справа.

Как это сделать с помощью CSS? Я предполагаю, что есть что-то очень простое, что я забыл, но я не могу понять, что. Поиски Google не вернули ничего полезного.

enter image description here

Ответы

Ответ 1

Тег li имеет свойство list-style-position. Это делает ваши пули внутри или вне списка. По умолчанию установлено значение inside. Это заставляет ваш текст обернуться вокруг него. Если вы установите его на outside, текст тегов li будет выровнен.

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

ul li {
    /*
     * We want the bullets outside of the list,
     * so the text is aligned. Now the actual bullet
     * is outside of the list’s container
     */
    list-style-position: outside;

    /*
     * Because the bullet is outside of the list’s
     * container, indent the list entirely
     */
    margin-left: 1em;
}

Редактировать 15 марта 2014 года Видя, что люди все еще приходят из Google, я чувствовал, что первоначальный ответ может использовать некоторое улучшение

  • Изменен блок кода, чтобы обеспечить только решение
  • Изменен блок отступов на em s
  • Каждое свойство применяется к элементу ul
  • Хорошие комментарии:)

Ответ 2

Вот хороший пример -

ul li{
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}

Рабочая демонстрация: http://jsfiddle.net/d9VNk/

Ответ 3

Второй ответ Dipaks, но часто достаточно текстового отступа, так как вы можете/не можете позиционировать ul для лучшего управления компоновкой.

ul li{
text-indent: -1em;
}