So legen Sie die Höheseigenschaft für SPAN fest

Ich muss den folgenden Code mit vordefinierter Höhe dehnbar machen

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

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

Da span jedoch ein Inline-Element ist, funktioniert die Eigenschaft "height" nicht.

Ich habe stattdessen versucht, div zu verwenden, aber es wird bis zur Breite des oberen Elements erweitert. Und die Breite sollte flexibel sein.

Kann jemand eine gute Lösung dafür vorschlagen?

Danke im Voraus.

Geben Sie es display:inline-blockin CSS ein - das sollte es tun lassen, was Sie wollen.
Im Hinblick auf die Kompatibilität: IE6 / 7 wird mit dieser Arbeit, wie Quirks - Modus schlägt vor:

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

Verwenden

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

Der einzige Trick ist die Browserunterstützung. Überprüfen Sie hier, ob Ihre Liste der unterstützten Browser Inline-Block verarbeitet .

Damit soll display: inline-block in allen Browsern funktionieren:

Wenn Sie im IE (6/7) hasLayout mit "zoom: 1" auslösen und dann die Anzeige auf Inline setzen, verhält es sich merkwürdigerweise wie ein Inline-Block.

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

Angenommen, Sie möchten es nicht zu einem Blockelement 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 die .titleals Block-Level - Element, und mit den entsprechenden Überschriften - Tags <h1>durch <h6>.

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

Damit Bereiche wie eine Tabellenzelle (oder ein anderes Element) funktionieren, muss die Höhe angegeben werden. Ich habe Spannweiten eine Höhe gegeben, und sie funktionieren einwandfrei - aber Sie müssen die Höhe hinzufügen, damit sie tun, was Sie wollen.

Eine andere Möglichkeit ist natürlich die Verwendung von Javascript (Jquery hier):

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

Warum brauchen Sie in diesem Fall eine Spanne? Wenn Sie die Höhe stylen möchten, können Sie einfach ein div verwenden? Sie könnten ein div mit versuchen display: inline, obwohl dies das gleiche Problem haben könnte, da Sie tatsächlich das gleiche tun würden wie eine Spanne.