Envelopper le texte et div comme une unité

Question

J'ai les éléments suivants que je voudrais emballer comme unités.

<div class='tag-box'> 
    <a href=#>Axe Committee</a> 
    <div class='circle'><a href=#>x</a></div> 
</div> 

Le CSS pour ces classes sont:

.tag-box { 
    display:inline; 
} 

.circle { 
    display:inline; 
    padding-left:4px; 
    padding-right:4px; 
    background:rgb(196,15,24); /*dark red*/ 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
} 

.circle a { 
    font-size:10px; 
    text-decoration:none; 
    color:#fff; 

    position:relative; top:-2px; 
} 

je peux avoir plus de 20 ou 30 de ces étiquettes-boîtes affichées en ligne. Le problème est que l'emballage va casser les mots les uns des autres ou même casser le cercle rouge du lien. Cela rend difficile de différencier quel cercle appartient à quel lien. (Dans le futur, chaque cercle correspond à une action différente par rapport au lien.) Voir ci-dessous. alt text http://www.freeimagehosting.net/uploads/f0c5a72ac9.png

Comment empêcher ce type d'emballage?

Answer 1

0: Utiliser white-space: nowrap;. 1: Vous pouvez avoir le cercle comme arrière-plan de votre .tag-box (ou de votre .circle a). par exemple:

 
.tag-box { 
    display: inline; 
    background-image: url('circe.png'); 
    background-position: 100%; /* Display to the right */ 
    background-repeat: no-repeat; 
    padding-right: 10px /* To leave space for the image */ 
} 

2: Vous pouvez utiliser fixe la taille flottante .tag-box-es (: /)

3: Vous pourriez avoir un script (prêt à l'emploi) a mis un cercle sur le droit de tous les ".circle un"

Answer 2

Vous pouvez essayer:

.tag-box { display: inline-block; }

Bien que vous pouvez rencontrer quelques problèmes avec les versions de Firefox 2 et plus de IE

Answer 3

Vous voulez chacun de vos .tag-box être en ligne (ne pas prendre toute la largeur disponible) mais toujours être considéré comme un bloquer (son contenu ne doit pas être coupé de moitié). Ici entre ... inline-block!

Voici un code HTML complet: http://pastebin.com/24tG7tCz

J'ai utilisé une liste des liens pour mieux représenter les listes de deux liens tag + l'action (mauvaises nouvelles: vous avez un divitis syndrome;))

J'ai également ajouté titre s: vos liens 'x' ne sont pas accessibles du tout et peuvent être déroutants pour tout le monde, avec ou sans handicap, car on ne sait jamais si le x supprimera l'étiquette sur la gauche ou à droite: il y a des dizaines de liens, chacun avec le texte 'dix '! Un attribut title sur l'élément a indique aux utilisateurs aveugles et à tout le monde via une info-bulle ce qui va vraiment faire ça x.

Avec un span à l'intérieur a.x, vous pouvez modifier le background-color sur hover et focus, il ne serait pas possible avec l'intérieur d'une durée ou div.