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

Question

J'ai besoin de rendre le code suivant étirable avec une hauteur prédéfinie.

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

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

Mais comme span est un élément en ligne, la propriété "height" 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 doit ê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 - cela devrait lui permettre de faire ce que vous voulez.
En termes de compatibilité : IE6/7 sera travailler avec cela, comme le suggère le mode quirks :

IE 6/7 n'accepte la valeur que sur les éléments avec un display : inline naturel.

Answer 2

Utilisez

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

Le seul truc est le support du navigateur. Vérifiez si votre liste de navigateurs pris en charge gère les inline-block ici. .

Answer 3

Ceci pour que display:inline-block fonctionne dans tous les navigateurs :

Assez bizarrement, dans IE (6/7), si vous déclenchez hasLayout avec "zoom:1" et que vous définissez ensuite l'affichage en ligne, il se comporte comme un bloc en ligne.

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

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 la .title comme un élément de niveau bloc, et en utilisant les balises d'en-tête appropriées <h1> par le biais de <h6> .

Answer 5

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

Pour que les espaces fonctionnent comme des cellules de tableau (ou tout autre élément, d'ailleurs), la hauteur doit être spécifiée. J'ai donné une hauteur aux spans, et ils fonctionnent très bien - mais vous devez ajouter de la hauteur pour qu'ils fassent ce que vous voulez.