Вторая линия начинается ли под пули после того, как в CSS-сброс

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

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

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

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

3 60
html css

3 ответа:

The 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;
}

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

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

вот это хорошо пример -

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

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

28

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

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