フリーフォント

Penguins

漫勉

まんべん

フリーベクター素材

Tulips

連続するリストを横並びに等分表示する方法

2017-09-21

連続するリストを横並びに等分表示する方法

横並びに3等分表示したい場合

3つのリストアイテムを等幅で並べたい場合は、前述の手法にならうと「33%」や「33.3%」を指定すればよいが、「1%」あるいは「0.1%」の望んでいない余白が生じる事が予想される。そこで、特定のリストアイテムに余白を与え、きれいに3等分することを目指す。3等分では次のようなCSSを追記する。

1
#item-list ul li {
2
width: 32%;
3
}
4
#item-list ul li:nth-child(3n-1) {
5
margin: 0 2%;
6
}
「li:nth-child(3n-1)」がポイントで、CSS3の疑似クラス「:nth-child()」を用いることで3等分する際中心に来るリスト(2番目、5番目、8番目…)の左右にマージンを設定している。これにより横幅の合計は32%+(2%+32%+2%)+32%=100%となる。x:リスト幅、y:マージンの値、とした場合、「2y=100-3x」を満たす数字であれば良い。たとえばx:33.2、y:0.2など。

Follow me!

HTML・CSS

Posted by art