Begrenzung der hintergrund-Farbe, die der Breite der überschrift

Ich versuche die Hintergrundfarbe zu kleben strikt an den text der überschrift und nicht erstrecken sich über die gesamte Breite der Seite. Ich verstehe, dass block-level-Elemente die gesamte Breite der Seite, so dass ich Frage mich, ob es war ein Weg, um dies neben zwingen inline-styles.

EDIT: Wenn ich display: inline-block; warum ist es, dass, obwohl ich angeben text-align: center; meine Header sind immer noch Links ausgerichtet? Sollte ich eine float statt?

  • Warum nicht die Hintergrundfarbe für das TextElement?
  • Wie soll ich das tun?
  • Check out @CatShoes Antwort.
  • Sie sollten text-align übergeordnete überschrift, und auch die auto-Margen für die Breite.
InformationsquelleAutor Ashish | 2012-03-31
  1. 3

    Oder die Anzeige als inline-block-treffen konnten die meisten Anwendungsfälle:

    h1 {
    background-color: red;
    display: inline-block;
    }

    InformationsquelleAutor Jameson
  2. 1

    Vielleicht so etwas wie dieses:

    In HTML:

    <div id="Heading">
   <span id="HeadingText">HEADING TEXT</span>
</div>

    CSS:

    #Heading
{
   /* Formatting of full heading */
}

#HeadingText
{
   /* Formatting for just heading text */
   background-color: #00ff00;
}

    Raten von deiner Frage, das ist nicht die Antwort, die du suchst, aber es kann nützlich sein.

    EDIT:

    Alternativ sollte dies auch funktionieren. Aber ich bin mir ziemlich sicher, dass dies ist, was Sie vermeiden wollen (inline, richtig?)...

    <h1 style="background-color:#660000; display:inline;">Heading<h1>
    • Danke!!! Für die Zukunft, ist es besser, den Stil zu erzwingen, inline-block oder zu wickeln block tags in divs?
    • Um ehrlich zu sein, das ist nicht eine Frage, die ich in der Lage bin, zu beantworten. Ich weiß nicht Recht, was die best practices sind. Sorry. Allerdings würde ich denke, es wäre wahrscheinlich am besten verwenden Sie inline oder inline-block anstelle der DIVs.
    • inline-block scheint tatsächlich zu sein, was ich nach war, aber, dass die Schrauben bis meine Fähigkeit zu zentrieren, ausrichten der Elemente.
    • Wenn Sie mit inline-block und wollen, zentrieren Sie den text, ich denke, Sie brauchen, um zu verwenden text-align: center für das Elternelement von Ihren inline-element.
    • Danke, das macht Sinn.
    InformationsquelleAutor CatShoes
  3. 0

    Diesem würde dieses problem lösen, denke ich:

    <div id="Heading">
   <div id="HeadingText">HEADING TEXT</div>
</div>

    Und css wäre:

    #Heading{
    background-color:#CCC;
}
#HeadingText{
    display:inline-block;
    background-color:#FF0000;
}
    InformationsquelleAutor Selçuk
  4. 0

    Müssen Sie das text-align:center; Attribut auf das übergeordnete element, welches dein div-block zu zentrieren, dein header und hintergrund mit display:inline-block;

    • Danke!!! Kennen Sie den Grund, dass durch die Art und Weise?
    InformationsquelleAutor manojadams
Schreibe einen Kommentar