☰

幅はコンテンツと同じ [重複] 質問する

tag-icon • tag-icon css width
幅はコンテンツと同じ [重複] 質問する

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>

ベストアンサー1

幅をmax-contentに設定したらうまくいきました。

width: max-content;

おすすめ記事