web-dev-qa-db-fra.com

Comment définir la propriété height pour SPAN

J'ai besoin de rendre le code suivant extensible 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 puisque span est un élément en ligne, la propriété "height" ne fonctionnera pas. 

J'ai essayé d'utiliser div à la place, mais cela augmentera 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.

cssheighthtml
72
Kelvin

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

IE 6/7 accepte la valeur uniquement sur les éléments avec un affichage naturel: inline.

125
casraf

Utilisation 

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

La seule astuce est la prise en charge du navigateur. Vérifiez si votre liste de navigateurs pris en charge gère inline-block ici .

21
Jon Galloway

ceci consiste à faire afficher: inline-block work dans tous les navigateurs:

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

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

En supposant que vous ne vouliez pas en faire un élément de bloc, essayez alors:

.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 consiste simplement à traiter le .title en tant qu'élément de niveau bloc et à utiliser les balises d'en-tête appropriées <h1> à <h6>.

5
David Thomas

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

Pour que les étendues fonctionnent comme une cellule de tableau (ou tout autre élément, d'ailleurs), vous devez spécifier la hauteur. J'ai donné une hauteur, et ils fonctionnent très bien - mais vous devez ajouter de la hauteur pour les amener à faire ce que vous voulez.

0
mike s

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

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