ungeordnete Liste in einem Absatzelement

Lesezeit: 4 Minuten

Benutzer-Avatar
vdegenne

wenn ich das schreibe:

<p class="paragraph">the list:
  <ul>
    <li>item</li>
  </ul>
</p>

Mein Browser wird semantisch wie folgt gerendert:

<p class="paragraph">the list:</p>
<ul>
  <li>item</li>
</ul>
<p></p>

warum ? und gibt es eine bessere Möglichkeit, Listenelemente in einem Absatz einzufügen?

  • Welcher Browser wäre das? Hier jsfiddle.net/B5f4b Wenn Sie sich die Frame-Quelle des Ergebnisses ansehen, scheint es in Ordnung zu sein.

    – Bala R

    23. August 2011 um 23:29 Uhr


Laut dem HTML5 Spezifikation kann ein Absatz enthalten Inhalt formulierendie still enthält keine anderen Gruppierungselemente:

http://www.w3.org/TR/html5/grouping-content.html#the-p-element

Laut dem HTML4.01 Spezifikation darf ein Absatz nur Inline-Elemente enthalten:

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

9.3.1 Paragraphs: the P element

<!ELEMENT P - O (%inline;)*            -- paragraph -->
<!ATTLIST P
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Das korrekte Markup in diesem Fall besteht darin, Ihren Absatz zu schließen, bevor Sie mit der Liste beginnen.

Alternativ können Sie ein anderes Tag als Absatz verwenden (wie z <div>), die nicht auf diese Weise verarbeitet werden.

<div>
   <ul> ... </ul>
</div>

  • Verwenden <div> sollte dringend davon abgeraten werden, da es nicht semantisch ist. Die richtige Lösung ist die Verwendung von <p> Tag wie hier beschrieben.

    – Brentonstrin

    5. März 2014 um 20:12 Uhr

  • Ja, ich habe die Spezifikation gesehen, aber das ist eine kleine Inkonsistenz für mich, da sie geschrieben haben, dass Elemente auf Blockebene Elemente auf Blockebene enthalten können. Ist es eine Erwartung?

    – vaso123

    23. August 2016 um 14:43 Uhr

  • Um diese Antwort zu vervollständigen, ein Teil des “Warum?” ist, dass das Absatz-Tag in einigen HTML-Versionen nicht immer geschlossen werden musste; dem Browser erlauben, die Schließung einzufügen <\p> wo es sinnvoll war (meistens angenommen, bevor Sie den nächsten Absatz geöffnet haben, aber nicht so fest definiert). Daher ist das Schließen vor einem Element auf Blockebene wie einer ungeordneten Liste gemäß den beiden genannten Spezifikationen für den Browser logisch.

    – Gremlin

    6. Oktober 2020 um 20:56 Uhr

Benutzer-Avatar
HaLeiVi

Ich hatte gerade dieses Problem und wollte es nicht in ein DIV einschließen, da ich P für den Rest dieser Seite und alle Seiten verwendet habe. Stattdessen habe ich SPANs so gestaltet, dass sie sich wie LIs verhalten.

SPAN.li  {display: list-item; margin-left: 2em}
<P>These issues are currently on my mind
<SPAN class=li>My hat</SPAN>
<SPAN class=li>Global warming</SPAN>
<SPAN class=li>Global cooling</SPAN>
<SPAN class=li>Global terrorism</SPAN>
<SPAN class=li>Global narrow-mindedness</SPAN></P>

Listen sind in Absätzen nicht erlaubt – es gibt keine Möglichkeit, es ist semantisch unmöglich.

Wenn Sie möchten, dass die Liste Stile vom Absatz erbt, fügen Sie einfach das UL-Element zu denselben CSS-Stilen wie Ihre P-Elemente hinzu:

z.B:

p, ul { font-size: 12px; }

oder noch besser, schließen Sie beide Elemente in etwas Logisches ein (Abschnitt, Artikel, Div).

Sie müssen sich fragen, warum Sie die Liste innerhalb des Absatzes haben wollen. Wenn Sie möchten, dass sie gleich gestaltet sind, möchten Sie, dass sie beide im selben enthaltenden Element enthalten sind, z. B.:

<article>
    <p>Paragraph of text</p>
    <ul>
        <li>List</li>
    </ul>
    <p>Next paragraph</p>
</article>

und gestalten Sie dann den Artikel.

  • Ich möchte eine Liste in meinem Absatz, weil sie die Struktur meines Satzes stark betont. B. „Ich möchte kaufen [list]• Milch, • Zucker, • Apfel und • eine Viola[/list] heute.“ Dies wird häufig verwendet, wenn Text mit TeX gesetzt wird. Es ist semantisch nicht korrekt, meinen Satz auf zwei Absätze aufzuteilen.

    – Paläc

    22. November 2013 um 17:37 Uhr


  • Also ist wahrscheinlich div die beste verbleibende Option.

    – ling

    28. Juli 2014 um 12:59 Uhr


  • Was bedeutet „semantisch unmöglich“? Es ist definitiv nicht unmöglich, dass ein Textabschnitt eine Liste enthält. Ich schreibe viele Absätze, die Listen enthalten. Tatsächlich schreibe ich viele Sätze, die Listen enthalten.

    – geil

    4. November 2021 um 20:06 Uhr

Versuche dies. Ich habe es in der Mitte meines Absatzes hinzugefügt und es hat funktioniert. Ich habe ihm auch eine Klasse und Zeilenumbrüche gegeben.

HTML:

<div>
<ul class="list">
<br><li>LIST</li></br>
<br><li>LIST</li></br>
</ul>
</div>

CSS:

.list{
list-style: black circle;
padding: 15 15 15 15;
background-color: grey;
}

Ich habe gerade eine Hintergrundfarbe und Polsterung hinzugefügt, die Sie danach entfernen können. Es hilft zu sehen, was passiert.

1205780cookie-checkungeordnete Liste in einem Absatzelement

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy