Hintergrundfarbe für H3 extendind mehr als der Inhalt

habe ich einen tag, wo ich habe ein Css für es als

      #jsn-maincontent_inner h3 {
       background-color:#BBB1A5;
       color:white;
       padding:3px 8px;
      text-transform:uppercase;
       }

aber die Hintergrundfarbe erstreckt sich über die ganze Zeile, der Zeile und es ist nicht begrenzt bis zu den Inhalten .
Wie man dieses Problem beheben??

InformationsquelleAutor useranon | 2010-04-13
  1. 7

    Ich dachte, ich würde chip in um Ihnen zu sagen, warum dies geschieht, da die Informationen können nützlich sein in der Zukunft.

    Die "h3" - element ist ein block-element. Dies bedeutet, es wird in der Regel die Aufnahme einer ganzen "Reihe", wie Sie es beschreiben.

    Grunde ein "span" - element (zum Beispiel) verhält sich anders, weil es sich um ein "inline" - element, was bedeutet, dass es dauern wird, bis "gerade genug" Raum.

    Gibt es zwei Lösungen, die bereits bis zu helfen, könnte man auch festlegen,

    display: inline;

    Auf dem h3-element, aber das wird sich ändern, anderes Verhalten zu.

    InformationsquelleAutor Fenton
  2. 3

    Die einfachste Sache zu tun, ist der text innerhalb eines span-und setzen Sie die Hintergrundfarbe auf die Spanne:

      #jsn-maincontent_inner h3 {
    padding:3px 8px;
    text-transform:uppercase;
   }
  #jsn-maincontent_inner h3 span {
    background-color:#BBB1A5;
    color:white;
   }

<h3><span>Text here</span></h3>

    Dadurch wird die Hintergrundfarbe nur um den text. Wenn Sie wollen, um tatsächlich schrumpfen die h3-element, können Sie entweder eine Breite (auch wenn der text umbrochen wird, wenn er länger ist als die Breite), oder machen es ein inline-element (obwohl es andere Nachteile dieses Ansatzes).

    InformationsquelleAutor Cahlroisse
  3. 1

    Versuchen Sie es mit einer width für die:

      #jsn-maincontent_inner h3 {
       background-color:#BBB1A5;
       color:white;
       padding:3px 8px;
       text-transform:uppercase;
       width:500px;
       }

    Können Sie auch wollen, um die width für #jsn-maincontent_inner wenn es nicht bereits:

    #jsn-maincontent_inner
{
   width:600px;
}
    InformationsquelleAutor Sarfraz
Schreibe einen Kommentar