Positionierung des details Button!

[Rolf B]

Hallo anko,

da gibt's ein Grundsatzproblem. <p> ist ein Element mit Inhaltskategorie "phrasing content" (schwer zu übersetzen, "Stil-Elemente". Im Prinzip Inline-Text mit Gestaltungs-Markup).

Aber <details> hat diesen Inhaltstyp nicht. Es ist allgemein vom Inhaltstyp "flow content" und gehört demnach in ein <p> Element nicht hinein. Der Browser weiß das. Wenn Du sowas formuliertst:

<p>Textkörper 1. <details>...</details> </p>

dann beendet der Browser das <p> vor dem <details>.

Man muss die Darstellung schon ziemlich vergewaltigen.

<style>
p.pre-details {
   display: inline-block;
}
details:not([open]) {
   display: inline-block;
   margin-left: 1em;
}
</style>
...
<p class="pre-details">Absatz vor Details.</p>
<details>
   <summary>Klapptext</summary>
   <p>Detailstext 1.</p>
   <p>Detailstext 2.</p>
<details>
<p>Absatz nach Details.</p>

Wichtig: die eckigen Klammern in :not([open]). Es geht darum, die Nichtexistenz des open-Attributs zu prüfen. Das margin-left: 1em lässt es etwas besser aussehen. Ist vielleicht schon zu viel.

Allerdings stimmt da der Abstand zwischen den Absätzen vor und nach Details nicht, weil bei zwei aufeinander folgenden <p> die Margins zusammenfallen. Diese <p> hier haben aber unterschiedliches display und darum passiert das nicht. Du brauchst noch einen Style mehr:

details + p {
   margin-top: 0;
}

aber da musst Du je nach Anwendungsfall aufpassen, das wird nicht unbedingt immer das Richtige sein.

Rolf