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

Tags:

#css
#技術メモ

細かく実験していないので不具合があるかも知れないが、さしあたり親要素に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も指定すると子要素の文字数が少なくても一定の幅が確保されて見栄えが悪くならずに済む。よい。

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