数学講師2847003 views
小学算数1193669 views
世界の国559994 views
教育148774 views
中学英語808125 views
りんご189887 views
高校化学2912417 views
MathPython489968 views
高校物理158008 views
高校国語785262 views
Help
Tools

English

CSS の columns で複数のリストを縦の列にするときは、リストの子要素(の子要素)をインラインにしてはいけない

結論はタイトルのとおり。

ul
	columns: 2
	column-gap: 24px

などとしたら、その子要素 li は

A E
B F
C G
D H

のように 2 カラムになる。もし li の子要素が a タグで D の高さが他よりも高いと、D にある a タグの文章の一部が次のカラムに移ってしまう。下図はリスト全体(ul)が columns に指定されて、リスト要素の中に a が入っている例。

columns_1

よく見ると、左カラムの最後の文章が途中で切れて右カラムの上に続いている。これを修正するには a タグを inline-block にする。

ul
	columns: 2
	column-gap: 24px

	li
		a
			display: inline-block

こうすると

columns_2

のようになる。これで文章がリスト要素の中に入った。