Hoe de hoogte-eigenschap voor SPAN in te stellen

Ik moet de volgende code rekbaar maken met een vooraf gedefinieerde hoogte

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

Maar aangezien spaneen inline element is, zal de eigenschap “height” niet werken.

Ik heb geprobeerd in plaats daarvan divte gebruiken, maar het zal uitbreiden tot de breedte van het bovenste element. En de breedte moet flexibel zijn.

Kan iemand hier een goede oplossing voor voorstellen?

Bij voorbaat dank.

Antwoord 1, autoriteit 100%

Geef het een display:inline-blockin CSS – dat zou het moeten laten doen wat je wilt.
In termen van compatibiliteit: IE6/7 zalhiermee werken, zoals de quirks-modus suggereert:

IE 6/7 accepteert de waarde alleen op elementen met een natuurlijke weergave: inline.

Antwoord 2, autoriteit 18%

Gebruik

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

De enige truc is browserondersteuning. Controleer hier of uw lijst met ondersteunde browsers inline-block verwerkt.

Antwoord 3, autoriteit 9%

dit is om display:inline-block in alle browsers te laten werken:

Vreemd genoeg, in IE (6/7), als je hasLayout activeert met “zoom:1” en vervolgens het display instelt op inline, gedraagt ​​het zich als een inline-blok.

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

Antwoord 4, autoriteit 3%

Ervan uitgaande dat u er geen blokelement van wilt maken, kunt u het volgende proberen:

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

Maar de gemakkelijkste oplossing is om de .titlegewoon te behandelen als een element op blokniveau en de juiste koptags <h1>te gebruiken via <h6>.

Antwoord 5

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

Om overspanningen te laten werken als een tabelcel (of welk ander element dan ook), moet de hoogte worden opgegeven. Ik heb overspanningen een hoogte gegeven en ze werken prima, maar je moet hoogte toevoegen om ze te laten doen wat je wilt.

Antwoord 6

Een andere optie is natuurlijk om Javascript te gebruiken (Jquery hier):

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

Antwoord 7

In sommige gevallen wil je misschien een SPAN-hoogte aanpassen zonder de weergave te veranderen: inline.

Om dit op te lossen, kunt u een eigenschap voor boven- en/of onderrand toevoegen, de vereiste breedteparameter naar uw behoeften instellen en een transparante kleur om die rand te verbergen:

.myspan {
   border-top : solid 3px transparent;
   border-bottom : solid 3px transparent;
}

Antwoord 8

Waarom heb je in dit geval een span nodig? Als je de hoogte wilt stylen, kun je dan gewoon een div gebruiken? Je zou een div kunnen proberen met display: inline, hoewel dat hetzelfde probleem kan hebben, aangezien je in feite hetzelfde doet als een span.