トップページ 本棚 メモ帳 告知板 道具箱 サイトの表示設定 リンク集 Twitter

子要素に合わせて親要素の幅を変える

Tags:
目次

子要素の幅に合わせて親要素の幅を自動的に変更する

細かく実験していないので不具合があるかも知れないが、さしあたり親要素にdisplay: inline-block;を適用するとうまく表示される。以下はこのメモ帳の「目次」に当てているスタイル。

.toc {
	margin-left: 2rem;
	margin-right: 2rem;
	margin-top: 2rem;
	padding: 1rem;
	border-style: solid;
	border-width: 1px;
	line-height: 1.5;
	min-width: 15rem;
	display:inline-block;
}

いっしょにmin-widthも指定すると子要素の文字数が少なくても一定の幅が確保されて見栄えが悪くならずに済む。よい。