CSSのwidthプロパティに問題があります。 divの中に段落がいくつかあります。緑色の背景がテキストのラベルのように見えるように、段落の幅をその内容と同じにします。私が代わりに得るのは、段落がより広いdiv fatherノードの幅を継承するということです。
#container {
width: 30%;
background-color: grey;
}
#container p {
background-color: green;
}
<div id="container">
<p>Sample Text 1</p>
<p>Sample Text 2</p>
<p>Sample Text 3</p>
</div>
デフォルトでは、p
タグはblock
要素です。つまり、タグは親のwidth
の100%を取ります。
Displayプロパティを変更することができます。
#container p {
display:inline-block;
}
しかし、それは要素を並べて配置します。
各要素をそれぞれ独自の行に配置するには、次のようにします。
#container p {
clear:both;
float:left;
}
(floatを使用していて、浮動要素の後にクリアする必要がある場合は、このリンクを参照してください。 http://css-tricks.com/all-about-floats/ )
デモ:http://jsfiddle.net/CvJ3W/5/
編集
display:inline-block
を使って解決策を取りながら、各項目を1行にまとめたい場合は、各項目の後に<br>
タグを追加するだけです。
<div id="container">
<p>Sample Text 1</p><br/>
<p>Sample Text 2</p><br/>
<p>Sample Text 3</p><br/>
</div>
私は幅を最大の内容として設定し、それは私のために働いた。
width: max-content;
p
スタイルにdisplay: inline-block;
を追加すると、以下のようになります。
#container p{
background-color: green;
display: inline-block;
}
inline-block
による解決策では、各要素の後に<br>
を挿入する必要があります。float
を使用した解決策では、すべての要素を "clearfix" divでラップする必要があります。
もう1つの優雅な解決策は、要素にdisplay: table
を使用することです。
このソリューションでは(inline-block
のように)手動で改行を挿入する必要はありません。(floatのように)要素の周りにラッパーは必要なく、必要に応じて要素を中央に配置することができます。
display:inline-block
を設定してから、余白を調整します。
ここでいじる: http://jsfiddle.net/Q2MrC/
width属性をwidth:fit-contentとして設定します。
あなたは以下のどちらかを使うことができます: -
1)display:inline-block:
http://jsbin.com/feneni/edit?html,css,js,output
行のコメントを外します
float:left;
clear:both
親コンテナが折りたたまれたことがわかります。
2)display:tableを使う
これを実現するためにflexを使うことができます。
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
flex-start
は自動的に子の幅をその内容に合わせて調整します。
代わりに<span>
</code>要素を使ってみてください。または、ご希望の場合はdisplay:inline
をお試しください
display:tableを使うだけです。あなたの場合は。
display: inline-block
を使用しているにもかかわらず。子要素の幅がparentの%
に設定されている場合、私のdivは画面の幅を埋めます。他の誰かがこれを解決する方法を探していて、親の比率の代わりにスクリーンの比率を使用しても構わない場合は、%
をwidth(Viewport Width)にvw
、またはheight(Viewport Height)にvh
に置き換えます。
何らかの理由でdisplay: flex
を使用しており、Edge/IEのようなブラウザで必要な場合は、代わりに次のものを使用できます。
表示:インラインフレックス
singdisplay:inline-block;
はスペース likeで正しい文に対してのみ機能します。
#container {
width: 30%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#container p{
display:inline-block;
background-color: green;
}
<h5>Correct sentence with spaces </h5>
<div id="container">
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<h5>No specaes (not working )</h5>
<div id="container">
<p>SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa</p>
</div>
なぜWord-wrap: break-Word;
を使わないのですか?長い単語が次の行に折り返して折り返せるようにするためです。
#container {
width: 30%;
background-color: grey;
overflow:hidden;
margin:10px;
}
#container p{
Word-wrap: break-Word;
background-color: green;
}
<h5> Correct sentence with spaces </h5>
<div id="container">
<p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<h5>No specaes</h5>
<div id="container">
<p>SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa</p>
</div>