css h1 - nur so breit wie der text

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?

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; 

.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.

Sie können display:inline-blockdieses Verhalten erzwingen

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/

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.

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;
}

Ä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;
}

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;
}

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