2015年2月11日水曜日

【CSS】 li 要素(リスト)を左詰めにする


<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>



というよくあるリストにおいて、li 要素を左詰めにする方法。

症状としては、PCのChromeでは左詰めになっているのだが、スマホのChromeで表示すると左側に余白があり、狭い画面の表示としては適切でなかった。


http://q.hatena.ne.jp/1111146773

http://okwave.jp/qa/q3493012.html

こちらを見ると、ul要素のCSSでmarginやpaddingを指定すればいいとのこと。→やってみたがダメ。


あれこれするうちに、li 要素でmarginを0に指定したら左詰めになりました。

li の全部指定するのは億劫なので、ul li にて一括指定することもできました。

もしかすると他のブラウザでは表示のされ方が異なるかもしれませんが。

0 コメント:

コメントを投稿