Sehen Sie folgendes Beispiel:Put-Anzeige: Inline-Element in verschachtelter Anzeige: Block-Element funktioniert nicht?
p {
display: inline;
}
em {
display:block;
}<p> Outer inline <em>Block <p>Inner inline</p></em></p>ich die <p>Inner inline</p> erwarten jedoch zu inlined mit Block, es beginnt in einer neuen Zeile. Hat jemand Ideen dazu? Vielen Dank!
Ihr Markup ist ungültig. Sie sollten nicht ein Element in p Element verschachteln und damit das Problem.
Von W3C:
Das P-Element stellt einen Absatz. Es kann keine Elemente auf Blockebene enthalten (einschließlich P selbst).
Überprüfen Sie die Quelle und Sie werden es bekommen, warum es verhält sich anders als das, was Sie erwarten, dass es
Ihr Browser sein wird tatsächlich alle Tags trennen und schließen Sie die p Elemente für Sie .
Also, wie wir es reparieren? Verwenden Sie das <span> Element anstelle von <p>
Es gibt zwei Möglichkeiten, dies zu tun:
<div> Outer inline <em>Block <p>Inner inline</p></em></div>
Oder die CSS von p ändern Inline-Block als:
p { display: inline-block; }
Ansicht Demo: https://jsfiddle.net/sonam185/sahfvhdd/
Demo mit div Elemente: http://jsfiddle.net/sonam185/3c3cyv4z/
ich immer gefragt, ob dies gilt nach wie vor, wenn 'P' ein Inline-Element durch CSS gemacht wird:' p {display: inline; } ' – knittl
@knittl Sie können sicherlich ein' p' als 'inline' machen, aber Verschachtelung ist wichtig, egal, Sie ändern die' Anzeige' eines Elements mit CSS, semantisch ist es falsch, jedes Block-Level-Element in 'p' und Browser wird es auf eine andere Weise analysieren und wird sich selbst beheben –