カテゴリー:
CSS
閲覧数:10 配信日:2023-12-21 16:01
このエントリーの結論
「display:inline-block;」指定した要素の直後を改行するためには、「display:inline-block;」自体を「display:table;」へ変更します。
※「display:table;」へ変更しても、横幅は文字列の長さのままです。
display:table;
ブロックレベルボックスを定義
HTML の <table> 要素と同じように動作しますが、tableタグが生成されるわけではありません。
変更するまで
▼HTML
<div class="hoge">
<!-- 任意のhtml要素 -->
<hr>
<h2>あいうえお</h2>
<h3>かきくけこ</h3>
</div>
▼CSS
h2 {
display: inline-block;
border-bottom: 1em solid red;
}
h3 {
display: inline-block;
border-bottom: 1em solid blue;
}変更後
▼CSS
h2 {
display: table;
border-bottom: 1em solid red;
}
h3 {
display: table;
border-bottom: 1em solid blue;
}