【CSS】横並びにしたリストをを右寄せにするには

css

よく横並びにしたテキストのリストになっているナビゲーションを見ますが、サイトの右寄せにている事が多いと思います。
まぁサブナビゲーションのような扱いだとよく見ますが。

で今回は何がしたいかというと、テキストなど横並び要素をする場合はdisplayでinlineを指定すればインライン要素となり横並びになりますが、この要素全体を右寄せにするにはどうしたら良いのか？という事を今回はメモしたいと思います。

「inline」または「inline-block」を使用した右寄せの方法

まずulに「text-align:right」を指定して右寄せにする。そしてliタグを「display:inline」または「display:inline-block」を指定する。
ただしinline-blockはIE7以下は対応していないので「zoom:1」を設定する必要がある

ul{
    text-align:right;
}

li{
    display:inline; 
    padding:0 10px;
}

//inline-blockの場合
li{
    display:inline-block; 
    padding:0 10px;
    zoom:1 // IE7以下
}

参考サイトは「横並びリストを中央寄せにする – CSSテクニック – acky info」