Putten Innerhalb fügt ein Extra hinzu [duplicate]

Lesezeit: 6 Minuten

Putten Innerhalb fugt ein Extra hinzu duplicate
Steve

Von http://webdesign.about.com/od/htmltags/p/aadivtag.htm

In HTML 4 darf sich das DIV-Element nicht innerhalb eines anderen Block-Level-Elements befinden, wie ein P-Element. In HTML5 befindet sich das DIV-Element jedoch darin und kann andere Fließinhaltselemente wie P und DIV enthalten.

Ich habe so etwas in einem Formular

<p> <label...> <input...> </p>

aber wenn Rails automatisch ein error_explanation div generiert, das die Eingabe umschließt, werden aus dem einen Absatz zwei, und ich sehe dies in Firebug:

<p> <label...> </p> <div...> <input...> </div> <p> </p>

Auch wenn ich nur eine einfache hinzufüge

<p> <div> test </div> </p>

das gleiche Problem tritt auf (JSFiddle) und es wird im DOM als gerendert

<p> </p> <div> test </div> <p> </p>

Warum?

Aktualisieren: Ich schickte der Autorin des Artikels eine E-Mail und sie nahm die entsprechenden Änderungen vor.

1646173928 906 Putten Innerhalb fugt ein Extra hinzu duplicate
Mu ist zu kurz

Von dem feine Spezifikation:

p – Absatz

[…]

Zulässige Inhalte

Inhalte formulieren

Und was ist das Inhalte formulieren? Inhalte formulieren:

Besteht aus phrasierende Elemente vermischt mit normale Zeichendaten.

Normale Zeichendaten ist genau das: unmarkierter Text. Phrasierungselemente sind:

ein oder em oder stark … [a bunch of other elements none of which are div]

Damit, <p><div></div></p> ist kein gültiges HTML. Gemäß den in der Spezifikation aufgeführten Tag-Auslassungsregeln gilt die <p> -Tag wird automatisch durch die geschlossen <div> -Tag, das die verlässt </p> Tag ohne Übereinstimmung <p>. Der Browser hat durchaus das Recht, zu versuchen, ihn zu korrigieren, indem er ein open hinzufügt <p> Tag nach dem <div>:

<p></p><div></div><p></p>

Du kannst kein setzen <div> in einem <p> und erhalten Sie konsistente Ergebnisse von verschiedenen Browsern. Geben Sie den Browsern gültiges HTML und sie werden sich besser verhalten.

Du kannst Geben <div> in einem <div> aber so, wenn Sie Ihre ersetzen <p> mit <div class="p"> und stylen Sie es entsprechend, Sie können bekommen, was Sie wollen.

Ihre Referenz auf about.com stimmt nicht mit der Spezifikation auf w3.org überein, Ihre Referenz führt Sie in die Irre.

  • Wie wäre es mit br-Tags? Wird es als bessere Praxis angesehen, DIV zu verwenden?

    – Steve

    26. Mai 2012 um 8:14 Uhr

  • @Steve: Hängt von den Umständen ab. Ich würde einen Container verwenden, um Elemente zu gruppieren und a <br> wenn ich einen Zeilenumbruch innerhalb einer Gruppe benötige.

    – mu ist zu kurz

    26. Mai 2012 um 17:20 Uhr

  • Beachten Sie, dass auch HTML5 erfordert das Verhalten von A </p> End-Tag, was zu einem leeren Absatz führt (obwohl dies wahrscheinlich nur als Ergebnis einer bestehenden Browser-Interop-Verbindung geschieht). Siehe stackoverflow.com/questions/11570902/…

    – BoltClock

    6. März 2015 um 3:23 Uhr


  • @BoltClock: Mark Amery fügte hinzu: „Gemäß den in der Spezifikation aufgeführten Tag-Auslassungsregeln ist die <p> -Tag wird automatisch durch die geschlossen <div> -Tag, das die verlässt </p> Tag ohne Übereinstimmung <p>“Anmerkung, brauchen wir mehr Klärung? Vielleicht könnte dieser ganze Absatz neu geschrieben werden.

    – mu ist zu kurz

    20. März 2015 um 5:52 Uhr

  • Ich finde es sieht OK aus. Mein Kommentar sollte klarstellen, dass ein Browser nicht nur das Recht hat, das nicht übereinstimmende End-Tag zu korrigieren, sondern dass er dazu auch verpflichtet ist. Vielleicht könnte es in den Absatz aufgenommen werden, aber ich denke nicht, dass es neu geschrieben werden muss.

    – BoltClock

    20. März 2015 um 6:11 Uhr

1646173929 86 Putten Innerhalb fugt ein Extra hinzu duplicate
Daniel Pervan

Obwohl dies eine ziemlich alte Frage ist, dachte ich, ich würde meine Lösung für das Problem teilen, um anderen Leuten zu helfen, die bei Google über diese Seite stolpern könnten.

Wie gesagt, es ist nicht erlaubt, Blockelemente innerhalb eines p-Tags zu platzieren. In der Praxis ist dies jedoch nicht ganz richtig. Der eigentliche Anzeigewert ist nämlich völlig irrelevant; das einzige, was berücksichtigt wird, ist, was die Ursprünglich Anzeigewert ist für das Tag, zB “block” für divs und “inline” für spans. Das Ändern des Anzeigewerts führt immer noch dazu, dass der Browser das p-Tag vorzeitig schließt.

Dies funktioniert jedoch auch umgekehrt. Sie können ein span-Tag so formatieren, dass es sich genau wie ein div-Tag verhält, es wird jedoch weiterhin in der p-Umgebung akzeptiert.

Also anstatt dies zu tun:

<p>
   <div>test</div>
</p>

Du kannst das:

<p>
   <span style="display:block">test</span>
</p>

Denken Sie nur daran, dass der Browser den Inhalt der p-Umgebung rekursiv validiert, also sogar so etwas:

<p>
   <span style="display:block">
       <div>test</div>
   </span>
</p>

Wird folgendes ergeben:

<p>
   <span style="display:block"></span>
</p>
<div>test</div>
<p>
</p>

Hoffentlich hilft das jemandem da draußen 🙂

  • Du sagst <p><span>...</span></p> ist immer noch technisch ungültiges HTML, aber das ist es nicht. <span> ist ein Formulierungselement, das innerhalb von erlaubt ist <p> und das Ändern des Anzeigewerts macht das HTML nicht ungültig. Hier ist ein weiterer Artikel, der dies behandelt

    – Unterkiefer79

    20. Oktober 2014 um 11:57 Uhr


  • Einstellung a span zu display:block und stecke es in a p möglicherweise eine unidiomatische Art, HTML/CSS zu verwenden (obwohl Jukka unter stackoverflow.com/a/18933182/1709587 einen faszinierenden Grund dafür vorbringt, warum dies manchmal gerechtfertigt sein kann). Es ist jedoch völlig gültiges HTML. Wenn die HTML-Spezifikation über den zulässigen Inhalt von Elementen spricht, kümmert sie sich nur um Tag-Typen – nicht um deren Stil.

    – Mark Amery

    14. Februar 2015 um 17:35 Uhr


Die Seite webdesign.about.com ist einfach falsch; Sie haben wahrscheinlich die HTML5-Entwürfe missverstanden. Das Zulassen von DIV in P würde große Verwirrung stiften; Ich glaube nicht, dass es jemals während der HTML5-Entwicklung in Betracht gezogen wurde.

Wenn Sie versuchen, DIV innerhalb von P zu verwenden, schließt das DIV-Start-Tag implizit das P-Element. Dies erklärt wahrscheinlich die Dinge, die Sie gesehen haben.

Um das Problem zu vermeiden, verwenden Sie P nicht, wenn der Inhalt ein DIV-Element enthält oder enthalten könnte. Verwenden Sie stattdessen DIV.

  • Wie wäre es mit br-Tags? Wird es als bessere Praxis angesehen, DIV zu verwenden?

    – Steve

    26. Mai 2012 um 8:13 Uhr

  • @Steve, ja, worüber br Stichworte? Wenn Sie meinen, ob sie in einem erscheinen dürfen p Element, dann ja, sie können. Das praktische Problem mit br ist, dass es eine Linie nicht zu einer macht Elementwas Styling und Scripting potenziell problematisch macht.

    – Jukka K. Korpela

    26. Mai 2012 um 11:30 Uhr

1646173930 548 Putten Innerhalb fugt ein Extra hinzu duplicate
Suresh Patil

Es ist unmöglich, a zu platzieren <div> Element innerhalb von a <p> im DOM wegen der Eröffnung <div> -Tag schließt automatisch die <p> Element.

<P> erlaubt kein anderes Element darin. nur <span> und <strong> Element erlaubt.In <p></p> wir können nur textbezogene Tags hinzufügen.
siehe diesen Link, um mehr zu erfahren

905540cookie-checkPutten Innerhalb fügt ein Extra hinzu [duplicate]

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

Privacy policy