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

77

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.

Geben Sie hier die Bildbeschreibung ein

html css OptimusCrime
quelle

Antworten:

166

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 :)
Tim S.
quelle
Brillant! Ich wusste, dass es einen einfachen Weg dazu gab. Danke vielmals! Akzeptiert in 5 min.
OptimusCrime
@OptimusCrime Sehr geschätzt!
Tim S.
Dies sollte ul li {...}
jvenema
@jvenema Persönlich bevorzuge ich nur ul, weil ich die Liste komplett ändern möchte, nicht jedes Element. Die Spezifikation besagt jedoch, dass alle list-style-...Eigenschaften für Listenelemente und nicht für Listen gelten. Ich werde die Antwort auf Richtigkeit bearbeiten :)
Tim S.
Danke für die Lösung! Es ist eigentlich eine gute typografische Praxis, die Kugeln in der Gosse sitzen zu lassen, damit ich mich nicht um den linken Rand oder die Neupositionierung der Liste kümmere.
37

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/

Dipak
quelle
21

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;
}
Rajesh Rajan
quelle