Zeilenumbruch nach </ div> verhindern

Gibt es eine Möglichkeit, einen Zeilenumbruch nach einem Div mit CSS zu verhindern?

Zum Beispiel habe ich

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

und möchte, dass es wie folgt angezeigt wird:

Mein Label: Mein Text

display:inline;

ODER

float:left;

ODER

display:inline-block; - Funktioniert möglicherweise nicht in allen Browsern.

Was ist der Zweck der Verwendung eines divhier? Ich würde a vorschlagen span, da es sich um ein Element auf Inline-Ebene handelt, während a divein Element auf Blockebene ist.

Beachten Sie, dass jede der oben genannten Optionen anders funktioniert.

display:inline;wird das divin das Äquivalent von a verwandeln span. Es wird von unberührt margin-top, margin-bottom, padding-top, padding-bottom, height, usw.

float:left;behält das divals Block-Level-Element. Es nimmt immer noch Platz ein, als wäre es ein Block, jedoch wird die Breite an den Inhalt angepasst (vorausgesetzt width:auto;). Es kann clear:left;für bestimmte Effekte eine erfordern .

display:inline-block;ist die Option "Das Beste aus zwei Welten". Das divwird als Blockelement behandelt. Es reagiert auf all die margin, paddingund heightRegeln wie bei einem Blockelement erwartet. Es wird jedoch als Inline-Element behandelt, um es in anderen Elementen zu platzieren.

Lesen Sie dies für weitere Informationen.

.label, .text {display: inline}

Wenn Sie das verwenden, können Sie die Divs genauso gut in Span's ändern.

Ein DIV ist standardmäßig ein BLOCK-Anzeigeelement, dh es befindet sich in einer eigenen Zeile. Wenn Sie die CSS-Eigenschaftsanzeige hinzufügen: Inline verhält sie sich wie gewünscht. Aber vielleicht sollten Sie stattdessen ein SPAN in Betracht ziehen?

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

Das div Elemente sind Blockelemente, daher nehmen sie standardmäßig die gesamte verfügbare Breite ein.

Eine Möglichkeit besteht darin, sie in Inline-Elemente umzuwandeln:

.label, .text { display: inline; }

Dies hat den gleichen Effekt wie die Verwendung von spanElementen anstelle von divElementen.

Eine andere Möglichkeit besteht darin, die Elemente zu schweben:

.label, .text { float: left; }

Dies ändert die Art und Weise, wie die Breite der Elemente festgelegt wird, so dass sie nur so breit sind wie ihr Inhalt. Außerdem schweben die Elemente nebeneinander, ähnlich wie Bilder nebeneinander fließen.

Sie können auch die Elemente ändern. Das divElement ist für Dokumentunterteilungen vorgesehen. Normalerweise verwende ich ein labelund ein spanElement für ein Konstrukt wie das folgende:

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

divs werden verwendet, um einer Website Struktur zu verleihen oder um viel Text oder Elemente zu enthalten, aber Sie scheinen sie als Beschriftung zu verwenden. Sie sollten span verwenden. Beide Texte werden automatisch nebeneinander platziert, und Sie müssen nicht schreiben CSS-Code dafür.

Und selbst wenn andere Leute Ihnen sagen, dass Sie die Elemente schweben lassen sollen, ist es am besten, wenn Sie nur die Tags ändern.

Ich glaube nicht, dass ich diese Version gesehen habe:

<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;}

Versuchen Sie, das clear:noneCSS-Attribut auf das Label anzuwenden .

.label {
     clear:none;
}

Versuchen Sie, Ihre Divs in CSS zu schweben

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

Ich habe es oft geschafft, Divs ohne Zeilenumbrüche nach ihnen zu bekommen, indem ich mit dem Attribut float css und dem Attribut width css herumgespielt habe.
Nachdem Sie die Lösung ausgearbeitet haben, müssen Sie sie natürlich in allen Browsern testen und in jedem Browser die Größe der Fenster ändern, um sicherzustellen, dass sie unter allen Umständen funktioniert.

Verwenden Sie diesen Code für normale Div display: inline;

Verwenden Sie diesen Code, wenn Sie ihn in der Tabelle display: inline-table; besser als in der Tabelle verwenden

Versuchen Sie dies (in CSS), um Zeilenumbrüche in divTexten zu vermeiden:

white-space: nowrap;