目次一覧
状態:結論(後で見返す用)
閲覧数:345
投稿日:2023-01-18
更新日:2023-12-21
このエントリーの結論 / 変更するまで /変更後
このエントリーの結論 / 変更するまで /変更後
このエントリーの結論
「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;
}
CSSで直前の要素を取得するセレクタはない。ので、直後の要素を取得してマイナス設定値を指定しました。
「position:fixed;」指定した要素を中央寄せするためには、「left:50%;transform:translateX(-50%);」を追記します。