css h1 - nur so breit wie der text

79

Ich habe einen H1-Stil für meine Website:

.centercol h1 {
    color: #006bb6;
    font-weight: normal;
    font-size: 18px;
    padding:3px 3px 3px 6px;
    border-left:3px solid #c6c1b8;
    background:#f2efe9;
    display:block;
}

Die Hintergrundfarbe erstreckt sich über die gesamte Breite des Centercols, 500px ...

Wie kann ich dafür sorgen, dass dieses H1 nur die Breite des Textes des H1 umfasst?

css

— Tony Noriega
quelle

108

Sie können den Inline-Block-Wert für die Anzeige verwenden. In diesem Fall verlieren Sie jedoch die Block-Funktion von h1, dh die Geschwister werden inline mit h1 angezeigt, wenn es sich um Inline-Elemente handelt (in diesem Fall können Sie einen Zeilenumbruch verwenden
).

display:inline-block;

— Chandu
quelle

26

Sie können auch versuchen, auf display:table;diese Weise keinen Zeilenumbruch zu verwenden.

— Arno van Oordt

Für diejenigen, die sich fragen, wie man eine Blockquote-Breite einstellt (die links in ein Bild passen müsste), verwenden Sie display: block; Überlauf: versteckt

— JinSnow

35

.h1 {
  width: -moz-fit-content;
  width: fit-content;

  // workaround for IE11
  display: table;
}

Alle modernen Browser unterstützen dies width: fit-content.

Für IE11 könnten wir dieses Verhalten emulieren, mit display: tabledem der Randkollaps nicht wie display: inline-blockoder unterbrochen wird float: left.

— Ihor Zenich
quelle

1

Dies ist die beste Antwort

— Sean T

19

Sie können display:inline-blockdieses Verhalten erzwingen

— Keith
quelle

4

Eine einfache Lösung hierfür besteht darin, das H1-Element nach links zu schweben:

.centercol h1{
    background: #F2EFE9;
    border-left: 3px solid #C6C1B8;
    color: #006BB6;
    display: block;
    float: left;
    font-weight: normal;
    font-size: 18px;
    padding: 3px 3px 3px 6px;
}

Ich habe ein einfaches jsfiddle-Beispiel zusammengestellt, das die Auswirkung des Stils "float: left" auf die Breite Ihres H1-Elements für alle zeigt, die nach einer allgemeineren Antwort suchen:

http://jsfiddle.net/zmEBt/1/

— Wilhelm
quelle

3

Dies liegt daran , Ihre <h1> ist die Breite des CenterCol. Geben Sie eine Breite an <h1>und verwenden margin: 0 auto;Sie diese, wenn Sie sie zentrieren möchten.

Alternativ können Sie das schweben lassen <h1>, wodurch es nur genau so breit wie der Text ist.

— JakeParis
quelle

Wenn ich eine Breite spezifiziere, wird ein H1-Tag mit mehr Text umbrochen, richtig?

— Tony Noriega

0

Ich habe dieses Problem kürzlich mit Tabellenbeschriftungen gelöst, obwohl ich nicht sagen kann, ob es empfohlen wird. Die anderen Antworten schienen in meinem Fall nicht zu funktionieren.

h1 {
  display: table-caption;
}

— Dibs
quelle

-1

Ähnlich wie bei den anderen Vorschlägen können Sie den folgenden Code verwenden. Wenn Sie jedoch den Rand gehen: 0 auto; Route Ich würde empfehlen, den Rand für die Ober- und Unterseite eines H1 auf etwas anderes als 0 zu setzen. Also vielleicht Rand: 6px auto; oder so.

.centercol h1{
    display: inline-block;
    color: #006bb6;
    font-weight: normal;
    font-size: 18px;
    padding:3px 3px 3px 6px;
    border-left:3px solid #c6c1b8;
    background:#f2efe9;
    display:block;
}

— Colin Devroe
quelle

-3

Align-Self-Start, Align-Self-Center ... in der Flexbox

.centercol h1{
    background: #F2EFE9;
    border-left: 3px solid #C6C1B8;
    color: #006BB6;
    display: block;
    align-self: center;
    font-weight: normal;
    font-size: 18px;
    padding: 3px 3px 3px 6px;
}

— Mode
quelle

4

Ihre Antwort ist unvollständig, Sie haben nicht einmal erklärt, was Flexbox ist

— Elias Soares

-5

Sie könnten ein <span>anstelle eines verwenden <h1>.

— zsalzbank
quelle

Es ist keine sehr gute Idee, die Semantik (semantische Bedeutung) zu ändern, nur um das Styling durchzuführen. Es wäre viel besser, <h1>mit CSS-Eigenschaft zu verwenden display: inline-block.

— magikMaker