Coding

CSS横並びの決定版

方法は色々ありますが、実用性の高いものをまとめてみます。

日本語は苦手なのでソースがメインです。

隙間の無い横並び

See the Pen 隙間の無い横並び by wada (@wadadanet) on CodePen.0

解説

ulのfont-sizeを0にして隙間をhtmlの隙間(スペースやタブ)を埋め、liで元に戻す

mixinにするならこんな感じ?

SASS mixin

=list_inline($child:li,$font_size:1rem)
	font-size: 0
	#{$child}
		display: inline-block
		font-size: $font_size

SASS 実際に使う時

.ex0
	+list_inline( li )

右側に出来る隙間を無くしたい

残念ながらwrapが必要

See the Pen 右側に出来る隙間を無くしたい by wada (@wadadanet) on CodePen.0

mixinにするならこんな感じ?

SASS mixin

=list_inline_fix($margin:10px , $child:ul, $child2:li, $font_size: 1rem)
	font-size: 0
	overflow: hidden
	#{$child}
		margin-right: - $margin
	#{$child2}
		margin-right: $margin
		display: inline-block
		font-size: $font_size

SASS 実際に使う時

.wrap
	+list_inline_fix( 10px , ".items" , ".item" )
	// ここから装飾