Die zweite Zeile in li beginnt nach dem Zurücksetzen des CSS unter dem Aufzählungszeichen

Ich habe einige Probleme mit meiner ulListe, nachdem ich CSS-Reset angewendet habe.

Wenn der Text in der liListe lang ist und in eine zweite Zeile übergeht, beginnt der Text unter dem Aufzählungszeichen. Ich möchte, dass es mit dem gleichen Rand / Abstand wie der Text auf der rechten Seite des Aufzählungszeichens beginnt.

Etwas schwer zu erklären, aber wenn man sich das Beispielbild ansieht. Das linke Bild ist die Liste heute. "motta varsel [...]" beginnt unter der Kugel, aber ich möchte, dass das Bild rechts angezeigt wird.

Wie kann ich das mit CSS machen? Ich nehme an, es gibt etwas sehr Einfaches, das ich übersehen habe, aber ich kann nicht herausfinden, was. Die Google-Suche hat auch nichts Nützliches zurückgegeben.

Das liTag hat eine Eigenschaft namens list-style-position. Dadurch werden Ihre Kugeln innerhalb oder außerhalb der Liste. Standardmäßig ist es auf eingestellt inside. Dadurch wird Ihr Text darum gewickelt. Wenn Sie dies festlegen, outsidewird der Text Ihrer liTags ausgerichtet.

Der Nachteil dabei ist, dass Ihre Aufzählungszeichen nicht mit dem Text außerhalb von ausgerichtet werden ul. Wenn Sie es mit dem anderen Text ausrichten möchten, können Sie einen Rand verwenden.

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

Bearbeiten 15. März 2014 Als ich sah, dass immer noch Leute von Google kommen, hatte ich das Gefühl, dass die ursprüngliche Antwort eine Verbesserung gebrauchen könnte

• Der Codeblock wurde geändert, um nur die Lösung bereitzustellen
• Die Einrückeinheit wurde in em's geändert
• Jede Eigenschaft wird auf das ulElement angewendet
• Gute Kommentare :)

Hier ist ein gutes Beispiel -

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

Arbeitsdemo: http://jsfiddle.net/d9VNk/

Ich stimme der Antwort von Dipaks zu, aber oft reicht nur der Texteinzug aus, da Sie die ul möglicherweise / möglicherweise nicht positionieren, um das Layout besser steuern zu können.

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