Wie einstellen Höhe Eigenschaft für SPAN

StackOverflow https://stackoverflow.com/questions/2343989

  •  23-09-2019
  •  | 
  •  

Frage

Ich muß mit vorgegebener Höhe folgenden Code dehnbar machen 

<style>
.title{
   background: url(bg.gif) no-repeat bottom right;
   height: 25px;
}
</style>

<span class="title">This is title</span>

Aber da Spanne ist Inline-Element, "Höhe" Eigenschaft wird nicht funktionieren.

Ich habe versucht, mit div statt, aber es wird auf die Breite des oberen Elements erweitert auf. Und sollte die Breite flexibel sein.

Kann jemand empfehlen, jede gute Lösung für das?

Vielen Dank im Voraus.

War es hilfreich?

Lösung

Geben Sie ihm einen display:inline-block in CSS - das sollte lassen Sie es tun, was Sie wollen
. Im Hinblick auf die Kompatibilität: IE6 / 7 Arbeit mit diesem, wie Quirks-Modus schlägt vor:

  

IE 6/7 akzeptiert den Wert nur auf Elemente mit einer natürlichen Anzeige:. Inline

Andere Tipps

Mit 

.title{
  display: inline-block;
  height: 25px;
}

Der einzige Trick ist Browser-Unterstützung. Überprüfen Sie, ob Ihre Liste der unterstützten Browser Griffe inline-block hier .

Das ist zu Anzeige machen: inline-block Arbeit in allen Browsern:

quirkly genug, in IE (6/7), wenn Sie hasLayout mit "Zoom: 1" auslösen. Und dann die Anzeige auf inline, es verhält sich wie ein Inline-Block 

.inline-block {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

Angenommen, Sie wollen es nicht ein Block-Element machen, dann könnten Sie versuchen: 

.title  {
    display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
    line-height: 2em; /* or */
    padding-top: 1em;
    padding-bottom: 1em;
}

Aber die einfachste Lösung ist, einfach zu behandeln den .title als Block-Level-Element, und mit den entsprechenden Überschriften-Tags <h1> durch <h6>.

Spanne { display: table-cell; height: (your-height + px); vertical-align: middle; }

Für Spannweiten Arbeit wie ein Tisch-Zelle (oder jedes andere Element, was das betrifft), Höhe muss angegeben werden. Ich habe Spannweiten eine Höhe gegeben, und sie gut funktionieren -. Sie müssen jedoch Höhe hinzufügen, um sie zu erhalten zu tun, was Sie wollen

Eine andere Möglichkeit ist natürlich Javascript verwenden (JQuery hier): 

$('.box1,.box2').each(function(){
    $(this).height($(this).parent().height());
})

Warum brauchen Sie eine Spanne in diesem Fall? Wenn Sie die Höhe, um Stil könnte man einfach ein div verwenden? Sie könnten einen div mit display: inline versuchen, aber das ist vielleicht das gleiche Problem hat, da Sie in der Tat würden die gleiche Sache wie eine Spanne tun.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top