CSS la largeur de la <span> balise

Question

J'utilise <span> tags dans mon module de titres, par exemple

<span>Categories</span>.

- Je spécifier la durée de la couleur de fond/image, la largeur et la hauteur en css.

Mais la durée de la largeur dépend de son contenu/texte.

Donc, si je ne l' <span></span>, avec juste un fond d'image/couleur en css, rien ne s'affiche.

Bien sûr, je veux quelque chose à apparaître.

Comment puis-je résoudre ce problème?

Answer 1

s'étend par défaut de style en ligne, qui vous ne pouvez pas spécifier la largeur de.

display: inline-block;

ce serait une bonne façon, sauf IE ne le supporte pas

vous pouvez, cependant, pirater un navigateur multiples solution

Answer 2

Vous pourriez définir explicitement la propriété d'affichage à "bloc" de sorte qu'il se comporte comme un élément de niveau bloc, mais dans ce cas, vous devriez probablement utiliser un div à la place.

<span style="display:block; background-color:red; width:100px;"></span>

Answer 3

Vous ne pouvez pas spécifier la largeur d'un élément d'affichage en ligne. Vous pourriez mettre quelque chose comme un espace insécable ( ), puis définissez le rembourrage pour donner un peu plus de la largeur, mais vous ne pouvez pas contrôler directement.

Vous pouvez utiliser display inline-block, mais qui n'est pas largement soutenue.

Un vrai hack serait de mettre une image à l'intérieur, puis de régler la largeur de que. Quelque chose comme un transparent de 1 pixel GIF. Pas l'approche recommandée.

Answer 4

Je voudrais utiliser l' padding d'attribut. Cela vous permettra d'ajouter un nombre de pixels de chaque côté de l'élément sans l'élément de perdre sa durée de qualités:

• Il ne deviendra pas un bloc
• Il va flotter comme vous vous attendez

Cette méthode ne fera qu'ajouter à l'rembourrage cependant, si vous modifiez la longueur du contenu (à partir de Catégories de Balises, par exemple), la taille du contenu va changer et que la taille globale de l'élément va changer aussi. Mais si vous voulez vraiment ensemble rigide de la taille, vous devriez faire comme mentionné ci-dessus et d'utiliser un div.

Voir le modèle de boîte pour plus de détails sur le modèle de boîte, le contenu, le rembourrage, marge, etc.

Answer 5

Utiliser l'attribut "display" comme dans l'exemple:

<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>