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


88

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


1
Vous devez utiliser des balises de titre (h1, h2, h3, ...) pour les titres. C'est plus sémantiquement correct.
Pickels

1
Oui, vous avez raison Pickels. Merci à tous pour votre aide. Ceci est mon dernier css. Cela fonctionne très bien pour moi: <style> h4 {display: inline-block; zoom: 1; * affichage: en ligne; marge: 0px; hauteur: 25px; } </style>
Kelvin le

Réponses:


142

Donnez-lui un display:inline-blockCSS - cela devrait lui permettre de 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 uniquement sur les éléments avec un affichage naturel: en ligne.


Pour ce que ça vaut, IE7 ne prend pas en charge inline-block.
Scott Cranfill

Np. @Scott: Je ne vois pas ça sur W3 - voici ce qu'ils disent:Note: No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".
casraf

2
@henasraf - @ Scott est correct, je ne peux pas non plus l'utiliser à cause des quicks: quirksmode.org/css/display.html
Nick Craver

2
Citation:IE 6/7 accepts the value only on elements with a natural display: inline.
casraf le

1
Ahah, je suppose que cela fonctionnera s'il est appliqué à un spanalors. Merci pour l'info, henasraf.
Scott Cranfill le


13

c'est pour faire fonctionner display: inline-block dans tous les navigateurs:

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

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

5

En supposant que vous ne vouliez 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 .titlecomme un élément de niveau bloc, et en utilisant les balises de titre appropriées <h1>par <h6>.


0

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

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


0

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

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

-4

Pourquoi avez-vous besoin d'un span dans ce cas? Si vous voulez styliser la hauteur, pourriez-vous simplement 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 fait la même chose qu'un span.


3
Ou, ignorez complètement mes divagations et utilisez la réponse de henasraf :)
Seth Petry-Johnson

Les commentaires de vote à la baisse découragent simplement ceux qui veulent légitimement contribuer. Arrête ça! Offrez simplement des commentaires constructifs à la place, ou probablement plus précisément votre propre opinion sur la question.
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.