Другий рядок у li починається під маркером після скидання CSS

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

Коли текст у liфайлі довгий і він переходить на другий рядок, текст починається під маркером. Я хотів би, щоб він починався з того самого поля / заповнення, що і текст з правого боку маркера.

Пояснити це начебто важко, але якщо поглянути на приклад-зображення. Лівий образ - це список сьогодні. "motta varsel [...]" починається під маркером, але я хотів би, щоб він дивився на малюнок праворуч.

Як я можу це зробити за допомогою CSS? Я припускаю, що я щось пропустив, але не можу зрозуміти, що. Пошуки в Google також не принесли нічого корисного.

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елемента
• Хороші коментарі :)

Ось хороший приклад -

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

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

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

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