Empêcher les sauts de ligne après </div>

Existe-t-il un moyen d'empêcher un saut de ligne après un div avec css?

Par exemple j'ai

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

et que vous voulez qu'il s'affiche comme:

Mon étiquette: mon texte

display:inline;

OU

float:left;

OU

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

Quel est le but d'utiliser un divici? Je suggérerais a span, car il s'agit d'un élément de niveau en ligne, alors que a divest un élément de niveau bloc.

Notez que chaque option ci-dessus fonctionnera différemment.

display:inline;transformera le diven l'équivalent de a span. Il ne sera pas affectée par margin-top, margin-bottom, padding-top, padding-bottom, height, etc.

float:left;conserve le divcomme élément de niveau bloc. Il prendra toujours de l'espace comme s'il s'agissait d'un bloc, mais la largeur sera adaptée au contenu (en supposant width:auto;). Cela peut nécessiter un clear:left;pour certains effets.

display:inline-block;est l'option «le meilleur des deux mondes». Le divest traité comme un élément de bloc. Il répond à tous les margin, paddinget les heightrègles comme prévu pour un élément de bloc. Cependant, il est traité comme un élément en ligne à des fins de placement dans d'autres éléments.

Lisez ceci pour plus d'informations.

.label, .text {display: inline}

Bien que si vous l'utilisez, vous pouvez tout aussi bien changer les div en span.

Un DIV est par défaut un élément d'affichage BLOCK, ce qui signifie qu'il se trouve sur sa propre ligne. Si vous ajoutez la propriété CSS display: inline, elle se comportera comme vous le souhaitez. Mais peut-être devriez-vous plutôt envisager un SPAN?

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

Les divéléments sont des éléments de bloc, donc par défaut, ils occupent toute la largeur disponible.

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

.label, .text { display: inline; }

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

Une autre façon est de faire flotter les éléments:

.label, .text { float: left; }

Cela changera la façon dont la largeur des éléments est décidée, de sorte que thwy ne soit aussi large que leur contenu. Cela fera également flotter les éléments les uns à côté des autres, de la même manière que les images se côtoient.

Vous pouvez également envisager de modifier les éléments. L' divélément est destiné aux divisions de documents, j'utilise généralement labelun spanélément et un élément pour une construction comme celle-ci:

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

Les div sont utilisés pour structurer un site Web ou pour contenir beaucoup de texte ou d'éléments, mais vous semblez les utiliser comme étiquette, vous devriez utiliser span, il mettra automatiquement les deux textes côte à côte et vous n'aurez pas besoin de le faire code css pour cela.

Et même si d'autres personnes vous disent de faire flotter les éléments, il est préférable de simplement changer les balises.

Je ne pense pas avoir vu cette version:

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

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

CSS:

#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}

Essayez d'appliquer l' clear:noneattribut css à l'étiquette.

.label {
     clear:none;
}

essayez de faire flotter vos div en css

.label {
float:left;
width:200px;
}
.text {
float:left;
}

J'ai plusieurs fois réussi à obtenir des div sans sauts de ligne après eux, en jouant avec l'attribut float css et l'attribut width css.
Bien sûr, après avoir élaboré la solution, vous devez la tester dans tous les navigateurs, et dans chaque navigateur, vous devez redimensionner les fenêtres pour vous assurer qu'elle fonctionne en toutes circonstances.

utilisez ce code pour un div normal display: inline;

utilisez ce code si vous l'utilisez dans une table display: inline-table; mieux que dans une table

essayez ceci (in CSS) pour éviter les sauts de ligne dans les divtextes:

white-space: nowrap;