親要素の幅を、widthを指定してない子要素に合わせる方法

Question

タイトルの通り、親要素の幅を、widthを指定してない子要素に合わせる方法はあるでしょうか。

例えば下のコードだと、h1をinlineに指定したので、h1の幅は文字の長さに合わせる事ができますが、h1自体にwidthを指定してない為、親要素であるdivは、inline-blockを指定していても、幅いっぱいに広がってしまいます。

※上記の質問は間違いでした！他のcssが適用されていただけで、子要素のwidthを設定してなくても、親要素は子要素の幅に合う様になっていました！

<style>
 div{
  display:inline-block;
 }

 h1{
  display:inline;
 }
</style>

<div>
 <h1>タイトル</h1>
</div>

このdivを、h1の幅に合わせる方法はないでしょうか。

お分かりになる方、ご教授頂ければ大変ありがたいですm(__)m

Answer 1

呈示のHTMLとCSSだけなら、divとh1 は同じ幅になります。

他のcssが優先されているのでは。詳細度を上げるか、!important(推奨はできませんが)を付けるかしたらどうなりますか。

Comments

[kentafukuda]

おっしゃる通り、他のcssが適用されていました...m(__)m
ありがとうございました！

Answer 2

僕の読解力が間違っていなければ、そもそもdivは必要ではなく、h1自身にdisplay: inline-block;を指定すればいいのかなと思います。

それともdivは幅だけ合わせて、高さは合わせず背景として使うのでしょうか？

Comments

[kentafukuda]

今回例として、上記の様なコードを作りました。
本来は、divの中にh1とpタグを入れて、h1とpタグを左揃えにしたく、
divで囲んで、text-align:leftを使おうと思っていました。