Comment définir la propriété de hauteur pour SPAN

Question

je dois faire du code ci-dessous avec une hauteur prédéfinie extensible

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

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

Mais depuis durée est un élément en ligne, propriété « hauteur » ne fonctionnera pas.

J'ai essayé d'utiliser div à la place, mais il s'étendra jusqu'à la largeur de l'élément supérieur. Et la largeur devrait être flexible.

Quelqu'un peut-il suggérer une bonne solution pour cela?

Merci d'avance.

Answer 1

Donnez-lui un display:inline-block en CSS - qui devrait le laisser faire ce que vous voulez.
En termes de compatibilité: IE6/7 va travailler avec cela, comme le mode Quirks suggère:

IE 6/7 accepte la valeur que sur les éléments avec un affichage naturel: en ligne.

Answer 2

Pourquoi avez-vous besoin d'une travée dans ce cas? Si vous voulez styler la hauteur, pourriez-vous utiliser un div? Vous pourriez essayer un div avec display: inline, bien que cela puisse avoir le même problème puisque vous feriez en fait la même chose qu'une durée.

Answer 3

Utilisez

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

Le seul truc est le soutien du navigateur. Check if your list of supported browsers handles inline-block here.

Answer 4

En supposant que vous ne voulez pas en faire un élément de bloc, vous pouvez essayer:

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

Mais la solution la plus simple est de traiter simplement le .title comme un élément de niveau bloc, et en utilisant le approprié en-têtes de rubrique <h1> à <h6>.

Answer 5

est de rendre l'affichage: travail inline-block dans tous les navigateurs:

assez Quirkly, dans IE (6/7), si vous déclenchez hasLayout avec "zoom: 1", puis régler l'affichage inline , il se comporte comme un bloc en ligne.

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

Answer 6

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

Pour des portées de travailler comme une table-cellule (ou tout autre élément, en l'occurrence), la hauteur doit être spécifié. J'ai donné une envergure aux travées, et elles fonctionnent très bien - mais vous devez ajouter de la hauteur pour les amener à faire ce que vous voulez.

Answer 7

Une autre option est bien sûr d'utiliser Javascript (Jquery ici):

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