Prévenir saut de ligne après </div>

Question

Est-il possible d'empêcher un saut de ligne après un div avec du css?

Par exemple, j'ai

    <div class="label">My Label:</div>
    <div class="text">My text</div>

et il veut s'afficher comme:

Mon Label: Mon texte

merci pour votre aide

Mise à jour:

Après pas de css solution conduit à un complètement de solution satisfaisante, je vais utiliser <span> comme certaines réponses suggérées

Answer 1

display:inline;

OU

float:left;

OU

display:inline-block; -- Pourrait ne pas fonctionner sur tous les navigateurs.

Quel est le but de l'utilisation d'un div ici? Je vous suggère un span, comme c'est une ligne de niveau élément, tandis qu'un div est un bloc de niveau élément.

---

Notez que chacune des options ci-dessus ne fonctionne différemment.

display:inline; tourner l' div en l'équivalent d'un span. Il n'en sera pas affecté par margin-top, margin-bottom, padding-top, padding-bottom, height, etc.

float:left; garde l' div comme un bloc de niveau élément. Il faudra encore de l'espace comme s'il s'agissait d'un bloc, cependant la largeur peut être monté sur le contenu (en supposant width:auto;). Il peut exiger un clear:left; pour certains effets.

display:inline-block; est le "meilleur des deux mondes". L' div est considéré comme un élément de bloc. Il répond à l'ensemble de l' margin, padding, et height règles comme prévu pour un élément de type block. Cependant, il est traité comme un élément intégré aux fins de placement dans d'autres éléments.

Lire ceci pour plus d'informations.

Answer 2

.label, .text {display: inline}

Mais si vous les utilisez, vous pouvez ainsi modifier la div pour span.

Answer 3

Une DIV qui est par défaut un BLOC d'affichage de l'élément en ce sens qu'elle s'assoit sur sa propre ligne. Si vous ajoutez de la propriété CSS display:inline, il va se comporter de la manière que vous voulez. Mais peut-être vous devriez envisager un SPAN à la place?

Answer 4

<span class="label">My Label:</span>
<span class="text">My text</span>

Answer 5

L' div - éléments sont des éléments de bloc, donc par défaut qu'ils prennent upp, la totalité de la largeur.

Une façon est de les transformer en éléments inline:

.label, .text { display: inline; }

Cela aura le même effet que l'utilisation d' span éléments au lieu de div - éléments.

Une autre façon consiste à faire flotter les éléments:

.label, .text { float: left; }

Cela va changer la façon dont la largeur des éléments est décidé, de sorte que thwy ne seront aussi larges que leur contenu. Mais aussi de rendre les éléments de flotter à côté de l'autre, semblable à la façon dont les images de flux de côté les unes des autres.

Vous pouvez aussi envisager de changer les éléments. L' div élément est prévu pour le document de divisions, j'ai l'habitude d'utiliser un label et span élément pour une construction comme ceci:

<label>My Label:</label>
<span>My text</span>