web-dev-qa-db-ja.com

コンテンツと等しい幅

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>
csswidth
72
user3067088

デフォルトでは、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>

新しいデモ：http://jsfiddle.net/CvJ3W/7/

116
DaniP

私は幅を最大の内容として設定し、それは私のために働いた。

width: max-content;

64
Sarneet Kaur

pスタイルにdisplay: inline-block;を追加すると、以下のようになります。

http://jsfiddle.net/pyq3C/

#container p{
    background-color: green;
    display: inline-block;
}
8
Stuart Kershaw

inline-blockによる解決策では、各要素の後に<br>を挿入する必要があります。
floatを使用した解決策では、すべての要素を "clearfix" divでラップする必要があります。

もう1つの優雅な解決策は、要素にdisplay: tableを使用することです。

このソリューションでは（inline-blockのように）手動で改行を挿入する必要はありません。（floatのように）要素の周りにラッパーは必要なく、必要に応じて要素を中央に配置することができます。

http://jsfiddle.net/8md3jy4r/3/

7
Ruslan Stelmachenko

display:inline-blockを設定してから、余白を調整します。

ここでいじる： http://jsfiddle.net/Q2MrC/

4
sn3ll

width属性をwidth：fit-contentとして設定します。

demo:http://jsfiddle.net/rvrjp7/pyq3C/114

4
RVRJ

あなたは以下のどちらかを使うことができます： -

1）display：inline-block：

http://jsbin.com/feneni/edit?html,css,js,output

行のコメントを外します

 float:left;
 clear:both

親コンテナが折りたたまれたことがわかります。

2）display：tableを使う

http://jsbin.com/dujowep/edit?html,css,js,output

4
satyam kumar

これを実現するためにflexを使うことができます。

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

flex-startは自動的に子の幅をその内容に合わせて調整します。

2
Nacho Coloma

代わりに<span> </code>要素を使ってみてください。または、ご希望の場合はdisplay:inlineをお試しください

1
Testare

display：tableを使うだけです。あなたの場合は。

0
was

display: inline-blockを使用しているにもかかわらず。子要素の幅がparentの%に設定されている場合、私のdivは画面の幅を埋めます。他の誰かがこれを解決する方法を探していて、親の比率の代わりにスクリーンの比率を使用しても構わない場合は、%をwidth（Viewport Width）にvw、またはheight（Viewport Height）にvhに置き換えます。

0
Chris Hayes

何らかの理由でdisplay: flexを使用しており、Edge/IEのようなブラウザで必要な場合は、代わりに次のものを使用できます。

表示：インラインフレックス

インラインフレックスのための〜97％ブラウザサポート付き

0
youngrrrr

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>
0
Liam