css h1 - nur so breit wie der Text

Ich habe eine H1 style 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 centercol, 500 Pixel...

Wie Mach ich das H1 nur erstrecken sich über die Breite der text des H1?

InformationsquelleAutor der Frage tony noriega | 2010-12-30

  1. 81

    Können Sie die inline-block-Wert für die Anzeige, aber in diesem Fall verlieren Sie die block-Funktion von h1, d.h. die Geschwister angezeigt werden inline mit h1, wenn Sie inline-Elemente(in diesem Fall können Sie einen Zeilenumbruch
    ).

    display:inline-block;

    InformationsquelleAutor der Antwort Chandu

  2. 16

    Verwenden display: table!

    Es nicht zu brechen-Marge Zusammenbruch wie display: inline-block oder float: left.

    InformationsquelleAutor der Antwort Ihor Zenich

  3. 15

    Können Sie display:inline-block um dieses Verhalten zu erzwingen

    InformationsquelleAutor der Antwort Keith

  4. 2

    Eine einfache Lösung für dieses ist, schweben Ihre H1-element Links:

    .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 zusammen eine einfache jsfiddle Beispiel zeigt, dass die Wirkung der "float: left" - Stil auf die Breite des H1-Elements für alle, die sich für eine eher Allgemeine Antwort:

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

    InformationsquelleAutor der Antwort William

  5. 0

    Dies ist, weil Ihre <h1> ist die Breite der centercol. Geben Sie eine Breite für die <h1> und verwenden margin: 0 auto; wenn Sie wollen, dass es zentriert ist.

    Oder, alternativ, Sie könnten schweben die <h1>die würde es nur genau so breit ist wie der text.

    InformationsquelleAutor der Antwort JakeParis

  6. -1

    Etwas wie die anderen Vorschläge, die Sie können den folgenden code verwenden. Allerdings, wenn Sie gehen, das margin: 0 auto; Strecke würde ich empfehlen, die margin für oben und unten von einem H1 festgelegt werden, um etwas anderes als 0. Also, vielleicht margin: 6px auto; oder so etwas.

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

    InformationsquelleAutor der Antwort Colin Devroe

  7. -1

    ausrichten-selbst-start, align-self-center... in 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;
}

    InformationsquelleAutor der Antwort voguess

  8. -4

    Könnte man eine <span> statt einer <h1>.

    InformationsquelleAutor der Antwort zsalzbank

Schreibe einen Kommentar