CSSのwidthプロパティで問題が発生しています。div内にいくつかの段落があります。段落の幅を内容と同じにして、緑色の背景がテキストのラベルのように見えるようにします。代わりに私が得るのは、段落がより広いdiv父ノードの幅を継承するということです。
#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要素です。つまり、タグは親の100％を取りwidthます。
次の方法で表示プロパティを変更できます。
#container p {
display:inline-block;
}
しかし、それは要素を並べて配置します。
各要素を独自の行に保持するには、次を使用できます。
#container p {
clear:both;
float:left;
}
（floatを使用していて、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>
新しいデモ：http：//jsfiddle.net/CvJ3W/7/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加