wake-up-neo.com

So legen Sie die height-Eigenschaft für SPAN fest

Ich muss 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 auf die Breite des oberen Elements erweitert. Und die Breite sollte flexibel sein. 

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

Danke im Voraus.

cssheighthtml
72
Kelvin

Vergeben Sie in CSS einen display:inline-block - damit sollte er tun, was Sie wollen.
In Bezug auf die Kompatibilität: IE6/7 wird damit arbeiten, da der Quirks-Modus Folgendes empfiehlt

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

125
casraf

Benutzen 

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

21
Jon Galloway

dies dient dazu, dass Anzeige: Inline-Block in allen Browsern funktioniert:

Wenn Sie in IE (6/7) hasLayout mit "zoom: 1" auslösen und dann die Anzeige auf Inline setzen, verhält es sich quasi als Inline-Block.

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

Angenommen, Sie möchten es nicht zu einem Blockelement machen, dann können Sie Folgendes 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;
}

Die einfachste Lösung besteht jedoch darin, .title einfach als Blockelement zu behandeln und die entsprechenden Überschriften-Tags <h1> bis <h6> zu verwenden.

5
David Thomas

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

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

0
mike s

Eine andere Option ist natürlich die Verwendung von Javascript (Jquery hier):

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