Y at-il un moyen de s'assurer que l'image reste avec au moins un mot du nom de la catégorie?

Question

J'ai une liste des catégories en ligne la liste avec une image dans la balise <a>

<div> 
<a><img>categoryname</a> 
<a><img>categoryname</a> 
<a><img>categoryname</a> 
<a><img>categoryname</a> 
</div> 

le css (moins)

.categorie a { 
     display:inline; 
     margin: 0 4px 0 0; 
    } 

Ma question est -> Y at-il un moyen de faire Assurez-vous que l'image reste avec au moins un mot du nom de la catégorie (sur la même ligne) car certaines catégories ont de grands noms.

• Je ne peux pas utiliser background-image en raison de IE7 (bug concernant la position de l'image)
• Je ne peux pas changer l'ordre des catégories

Answer 1

Essayez

.categorie { 
    white-space: normal; 
} 
.categorie a { 
    white-space: nowrap; 
    display: inline-block; 
    padding: 0 4px 0 0; 
} 

Qui devrait définir le tag pour ne pas envelopper ts, mais le conteneur pour envelopper son contenu.

Answer 2

avez-vous essayé d'ajouter vertical-align: middle;

.categorie a { 
    display:inline; 
    margin: 0 4px 0 0; 

    vertical-align:middle; /* add this property */ 
} 

l'alignement vertical se assurer que l'image aligne verticalement au milieu avec le texte à droite de celui-ci

également en fonction de votre balisage et vos besoins, vous pouvez ajouter float: left à l'image et également l'ajout d'une portée autour de votre texte à côté de l'image et flottant ainsi

MISE à JOUR

essayez d'utiliser float: left sur la Une étiquette:

.categorie a { 
    float:left; /* add this property */ 

    display:inline; /* add this property */ 

    margin: 0 4px 0 0; 
} 

vous pourriez avoir à changer la propriété d'affichage inline-block

également si vous configurez un jsFiddle ou codepen nous pouvons mieux vous aider :)