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 puisque la propriété durée est un élément en ligne, "hauteur" ne fonctionnera pas.
J'essayé d'utiliser div à la place, mais il se développera jusqu'à la largeur de l'élément supérieur. Et la largeur doit être flexible.
Quelqu'un peut-il suggérer une bonne solution pour cela?
Merci d'avance.
La solution
Donnez-lui un display:inline-block
en CSS - qui devrait le laisser faire ce que vous voulez
.
En termes de compatibilité: IE6 / 7 travail avec cela, comme le mode Quirks suggère:
IE 7/6 accepte la valeur uniquement sur les éléments avec un affichage normal. Inline
Autres conseils
Utilisez
.title{
display: inline-block;
height: 25px;
}
La seule astuce est support du navigateur. Vérifiez si votre liste des navigateurs pris en charge gère inline-block .
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églez l'affichage en ligne, il se comporte comme un bloc en ligne
.inline-block {
display: inline-block;
zoom: 1;
*display: inline;
}
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 les balises de titre appropriés <h1>
par <h6>
.
{ display: table-cell; height: (your-height + px); vertical-align: middle; }
span
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 hauteur travées, et ils fonctionnent très bien -. Mais vous devez ajouter de la hauteur pour les amener à faire ce que vous voulez
Une autre option est bien sûr d'utiliser Javascript (Jquery ici):
$('.box1,.box2').each(function(){
$(this).height($(this).parent().height());
})
Pourquoi avez-vous besoin d'une portée dans ce cas? Si vous voulez le style de la hauteur pourriez-vous utiliser un div? Vous pouvez essayer un div avec display: inline
, bien que cela puisse avoir le même problème puisque vous feriez en effet faire la même chose comme une portée.