Was ist in CSS besser, um einen Zeilenumbruch nach einem Element zu erzwingen, anstatt es zu einem Blockelement zu machen?

Ich habe eine H3-Überschrift, die ich gerne mit einer bestimmten Hintergrundfarbe gestalten würde, aber ohne dass der Hintergrund des Elements die volle Breite des Elternelements einnimmt. Sehen als H3 ist standardmäßig ein Blockelement, würde mein Stil braucht das Element zu einem Inline-Block-Elemente, oder einfach nur ein Inline-Inline-Element wie so zu ändern:Was ist in CSS besser, um einen Zeilenumbruch nach einem Element zu erzwingen, anstatt es zu einem Blockelement zu machen?

h3 { 
    background-color: #333; 
    color: white; 
    display: inline-block; 
}

Dieser funktionieren wird, aber wenn es nur wird unmittelbar gefolgt von einem Blockelement. Ich möchte das Markup nicht ändern, nur um diesem Stil gerecht zu werden. Daher habe ich mich gefragt, ob es möglich ist, ein angrenzendes Element unabhängig davon, wie es angezeigt wird, in der nächsten Zeile zu beginnen.

Angenommen, ich kann CSS3 verwenden.

Quelle

2010-09-21 Nathan Ridley

Wie auch immer, warum 'was ist ein besserer Weg ... als es ein Blockelement zu machen'? Was ist nicht gut daran, es zu einem Blockelement zu machen? –

@Litso - Ich habe das in meiner Frage erklärt. Ein Block-Element nimmt die gesamte Breite des Eltern-Elements auf, was das Styling, das ich anstrebe, durcheinander bringen würde. –

versuche 'padding-bottom: 15px; display: table; ' – KingRider

versuchen, dieses:.

h3:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

Quelle

2010-09-21 10:01:46 PeterWong

+1 für Ideenreichtum, aber funktioniert nicht für mich in Chrome –

': nach 'hat sehr lückenhafte Unterstützung – fredley

Eigentlich denke ich, dass diese Art von Sache ziemlich üblich ist, insbesondere mit Float Clearing. Es funktioniert für mich in Chrome. @ Litso - Bist du sicher, dass du es richtig gemacht hast? –

Dies wird die Breite so klein wie möglich machen (nicht das gesamte Elternelement ausfüllen) und andere Elemente darunter erscheinen lassen.

Quelle

2010-09-21 09:57:55 fredley

* Abgesehen davon, dass es ein Blockelement ist. Lies zumindest den Titel. – AlexanderMP

Entschuldigung, ich lese 'ohne' als 'mit', mein Schlechter. Ich habe die Antwort aktualisiert, denke immer noch, "Block" ist der richtige Weg, dies zu tun. – fredley

Eigentlich wurde das gefragt. Das OP wollte etwas, das im Layout als Blockelement arbeitet (es lebt vertikal von selbst), aber den Hintergrundbereich auf die Breite des Inhalts beschränkt. Die Frage wurde nach einer Lösung ohne Block gestellt, da das OP nicht wusste, dass ein Blockelement so funktionieren könnte. –

Wie oft passiert es, dass das Element nach dem <h3> ein Inline-Element ist? (Normalerweise nach einem Header sollte es wie eine <p>, <ul> oder andere Blockelemente sein, obwohl dies völlig von Ihrem HTML abhängt. Ist es vorhersehbar? Ist es eine Option, nur jedes Element, das direkt folgt <h3> in ein Blockelement?

h3 ~ * { display: block }

der einzige andere Weg, ich weiß ein Block-Element nehmen nicht zu haben, den ganzen Raum es schwimmt, aber das lässt ein weiteres Problem

Quelle

2010-09-21 10:01:31

Das Element nach der H3 könnte leicht ein Inline-Block-Element, oder es könnte links schweben, die es auf der gleichen Linie wie die H3 sitzen würde. Wenn Sie das angrenzende Element dazu zwingen, ein Blockelement zu sein, überschreiben Sie auch, wie es mit seinen eigenen folgenden Geschwistern interagiert, was unbeabsichtigte Konsequenzen haben kann. –

Ich musste etwas ähnliches mit Inline-Nav-Elementen machen, die an bestimmten Punkten brechen müssen. Funktioniert das?

h3:after { 
    content: "\A "; 
    line-height: 0; 
    white-space: pre; 
    display:inline-block; 
}

Ich scheine mich daran zu erinnern IE7 ein Problem damit zu haben.

Quelle

2012-08-22 12:56:48 user1010892

\ A ist vorhanden Bug anderen Browser, versuchen \ 00000a ;-) ... keine Inline-Block und Zeilenhöhe, nur blockieren – KingRider

Wenn Sie nicht h3 Zentrum müssen, kann dies helfen:

h3 { 
    background-color: #333; 
    color: white; 
    display: inline-block; 
    float: left; 
    clear: left; 
}

Quelle

2013-11-12 14:40:05 Rotareti

ich über diese ganze Zeit in meinem Code kommen, in der Regel für divs, die Inline-block'ed sind. Der beste Weg, den ich gesehen habe, ist, eine neue Zeile zu erzwingen, indem Sie Ihren Code in ein zusätzliches div einbinden. Der ursprüngliche HTML-Code erhält die erwartete Formatierung, und der div-Wrapper erzwingt eine neue Zeile.

Unter der Annahme, dies Ihr h3 Styling ist,

h3 { 
    display: inline-block; 
}

Dann wickeln Sie es nur in einem div.

<div> 
    <h3>My heading</h3> 
</div>

Quelle

2016-03-24 14:17:34

Was ist in CSS besser, um einen Zeilenumbruch nach einem Element zu erzwingen, anstatt es zu einem Blockelement zu machen?

Antwort

Verwandte Themen