弊社でECサイトのシステムを扱っている事情、商品が並ぶリストをコーディングすることがあります。
まぁECサイトだけでなく、横並びのリストのパターンはよくあると思います。

いつもコーディングしていて簡単な方法がないかな〜と思って色々なやり方をやってみたりします。
それを今回まとめてみましたので、紹介したいと思います。
レスポンシブデザインにいいやつもあるかと思います。
 
1.ulを横幅をmargin分拡げ、overflowで消す
2.一番右端にclassを付ける
3.nth-childを使う
4.ulをマイナスマージンする
5.liを％で均等にわけ、paddingで余白を調整
 
上手いこと表現できないですね。。。
わからないと思います笑

デモをご覧ください！
(デモを見ても見た目は全部同じような感じなのでFirebugかなにかで)

DEMO

下で簡単に説明をしたいと思いますが、
基本のHTMLは、以下になります。
cssはレスポンシブデザインを見越して、%で書けるところは%でやってます。

1.ulを横幅をmargin分拡げ、overflowで消す

これは当初からレスポンシブが出現するまで使っていた方法でした。
親の要素の幅:1000px
liの幅:235px
margin:20px(rightとbottomに)

基本の設定が上記になります。

このまま並べると、liとmarginを合わせると、
1020pxになってしまうので、ulをその値にし、
その親の要素を1000とし、overflow:hiddenで切ってしまいます。

そうすると上手いこと並んだリストになります。

cssは以下になります。

中身は省略させていただきます。上述しているHTMLにはありませんが、section01というclassで囲んでいます。
レスポンシブは逐一横幅を設定しないといけないので面倒くさいです。

2.一番右端にclassを付ける

基本の設定は1と同じです。

一番右の要素に、lastみたいなclassを付ける感じです。
classをつけることに、右のmarginを0にしちゃうものです。
この方法は最後の手段であまり使ったことはありません。

プログラム側も面倒くさいですし、レスポンシブさせる時も面倒くさいので。。。

とはいえ、他のECサイトでもこの方法は見かけたりもします。

cssは以下のようになります。

これはレスポンシブさせるには正直向いてないかもしれません。
jQueryを使えばlastの位置を調節はできますが・・・

3.nth-childを使う

これ実はやったことないがありません笑
この擬似セレクタはIE9からの対応なので、
実際の案件ではまだ出来ません・・・
これでも出来るかもと思ってやってみました。

cssは以下になります。

一見よさそうなのですが、
レスポンシブのコーディングでやろうとするとちょっと面倒くさかったです。

横並びのアイテムの数を変えようとすると、cssだけで済むのですがちょっとややこしい変更しないといけません。

4.ulをマイナスマージンする

これは他のwebサイトを見ていたら使っていた方法で、何回か使ったことがあります。

cssは以下のようになります。

1との違いは、marginの向きが逆なのと、
.itemListを1020pxといったように設定する必要がありません。
1よりはレスポンシブがやりやすいです。

5.liを％で均等にわけ、paddingで余白を調整

これは最近知った方法で、
liを個数分で割った%に設定し、余白はliの中で取るという方法です。
ちなみに、box-sizingのborder-boxを設定しています。

cssは以下のようになります。

これはレスポンシブ時も簡単で、

liの横幅を変更するだけでOKです！

ただ、ひとつ難点があり、
liの左右に余白を設定しているので、
一番左と一番右に隙間が開いているように見えてしまいます。

この場合は、コンテンツの横幅は1000pxにしたいので、
親の要素を1020px程度にして、10px分を0.98%として余白に設定し、
1000pxで見えるようにしています。

そして、見出し部分にも同じように設定して、隙間が開いているように見えないようにします。

レスポンシブさせるなら今のところこれがいいのかもと思いながら、
デザインと全くのズレなくコーディングするのはちょっと大変かもしれません。
 
 

一番何がいいというのは
その時のデザインによって変わるとも思いますので、
決めきれません。
いろんなパターンを知っておいてその時その時でベストな方法を取ればいいのかなと思います。

もちろんパターンはこれ以外にありますので、参考までに見て頂けれたら幸いです。