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

StackOverflow https://stackoverflow.com/questions/2343989

  •  23-09-2019
  •  | 
  •  

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.

Était-ce utile?

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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top