後の改行を防ぐ</ div>

CSSでdivの後の改行を防ぐ方法はありますか？

例えば私は持っています

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

そしてそれを次のように表示したい：

私のラベル：私のテキスト

display:inline;

または

float:left;

または

display:inline-block; -一部のブラウザでは動作しない場合があります。

divhere を使用する目的は何ですか？spanインラインレベルの要素であるのに対して、a divはブロックレベルの要素であるため、をお勧めします。

上記の各オプションは動作が異なることに注意してください。

display:inline;はとdiv同等のものに変わりspanます。それはの影響を受けないだろうmargin-top、margin-bottom、padding-top、padding-bottom、height、など

float:left;をdivブロックレベルの要素として保持します。それでもブロックのようにスペースを占有しますが、幅はコンテンツに合わせて調整されます（を想定width:auto;）。clear:left;特定の効果にはが必要になる場合があります。

display:inline-block;「両方の長所」のオプションです。divブロック要素として扱われます。これは、のすべてに対応しmargin、padding、およびheightブロック要素のための予想通りのルール。ただし、他の要素内に配置する目的では、インライン要素として扱われます。

詳細については、こちらをお読みください。

.label, .text {display: inline}

ただし、それを使用する場合は、divをspanに変更することもできます。

DIVはデフォルトでBLOCK表示要素です。つまり、DIVは独自の行に配置されます。CSSプロパティdisplay：inlineを追加すると、希望どおりに動作します。しかし、おそらく代わりにSPANを検討する必要がありますか？

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

div要素は、そのデフォルトでは、彼らは完全な利用できる幅をUPP取る、ブロック要素です。

1つの方法は、それらをインライン要素に変換することです。

.label, .text { display: inline; }

これは、span要素の代わりにdiv要素を使用するのと同じ効果があります。

別の方法は、要素をフロートさせることです：

.label, .text { float: left; }

これにより、要素の幅がどのように決定されるかが変更されるため、thwyはそのコンテンツと同じ幅になります。また、画像が互いに並んで流れるのと同じように、要素を互いに並べてフロートさせます。

要素の変更を検討することもできます。div要素は、文書の部門を対象として、私は通常使用labelしてspan、このような構造のための要素を：

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

divは、ウェブサイトに構造を与えたり、多くのテキストや要素を含めるために使用されますが、ラベルとして使用しているように見えます。そのためのCSSコード。

そして、他の人が要素をフロートするようにあなたに言ったとしても、あなたはタグを変えるだけでよいです。

私はこのバージョンを見たことがないと思います：

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

clear:noneラベルにcss属性を適用してみてください。

.label {
     clear:none;
}

CSSであなたのdivをフロートしてみてください

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

float css属性とwidth css属性をいじって、divを改行なしで取得することに何度も成功しています。
もちろん、ソリューションを実行した後は、すべてのブラウザーでテストする必要があります。各ブラウザーで、ウィンドウのサイズを変更して、すべての状況で機能することを確認する必要があります。

このコードを通常のdivに使用します display: inline;

テーブルdisplay: inline-table; よりもテーブルで使用する場合は、このコードを使用して ください

テキストのCSS改行を防ぐためにこれを試してくださいdiv：

white-space: nowrap;