BLOG

2014年3月30日/

[CSS]スマホサイト制作時に便利!3列の横並びリスト作成

 

過去にスマホサイトを制作する際困ったことがあります。

 

それが画面いっぱいの横幅を同じ幅で3つに分けるということです。

 

メニュー作成のときとかによく使うかもしれません。

 

最初は何も考えず外枠(ul)をwidth:100%で指定し、中のリスト(li)を33%,34%,33%として

float:leftでしてみました。

 

しかしこれでは右隅に若干隙間ができてしまうのです。

 

iPhoneの場合(幅320px)、33%だと105.6px、34%だと108.8pxになり切り捨てで、

33%は105px、34%は108pxになると思われます。

 

33%(105px)、34%(108px)、 33%(105px)の合計で 318pxとなり、2pxスペースができてしまいます。

 

かといって33.33333…..%を使っても必ず余るし、どうしたらよいものかと。。。

 

解決方法はdisplay:tableを使うことでした。

 

下記のように外枠(ul)にdisplay:table、table-layout:fixedを使用し、リスト(li)にdisplay:table-cellを使うのです。

 

 

こうすればリスト(li)の数が4つ、5つと増えた際も自動的に均一に分けることができます。

 

便利ですね。

 

Resent Posts

Category