Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

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

      2015/07/18

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

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

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

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

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

 - css

     

Message

  関連記事

【CSS】CSS filterプロパティによる画像エフェクトを試してみた!

先日、FIRE FOXのブラウザのBeta 35が発表されました。 CSS fi …

【CSS】横並びさせた要素の端っこのマージンを調整する方法

よくfloatを利用してボックス要素などを横並びにする機会がたくさんあると思うん …

【CSS3】border-radiusを利用して画像を丸く表示してみる

ここ最近はブラウザのバージョンも上がってきたし、IEのシェアも減ってきたので嬉し …

CSSで動画をレスポンシブに対応させる方法

最近、スマホが主流になってきてyoutubeやVimeoなどの動画を埋め込むサイ …

CSS3のFlexboxが仕様が変わった!!新しいフレキシブルボックスレイアウトとは!?

CSS3のフレックスボックスなんですが、もともとフレックスボックスに対する査定が …

【CSS】CSS3でFlexboxの水平方向と垂直方向の揃え方とは!?

このブログでも、何回か記事にした事もあるCSS3のFlexboxについての記事で …

【CSS】nth-childとnth-of-typeとfirst-childとfirst-of-typeの違い

いや~なまじjqueryをいじりまくっていたんで勘違いしてました。 nth-ch …

【CSS3】新しいプロパティで要素を上下中央に配置する方法!!

ここ最近は、CSS3もだいぶ使えるような環境が整ってきたのですが、少し要素を上下 …

CSS3のtransformで回転・拡大縮小・移動をアニメーションさせてみた

前回はtransitionによるアニメーションをメモったがそれを利用してアイコン …

css3から追加された新しい単位「rem」でのフォントサイズ調整が便利

cssでフォントサイズを決めていくときよく「%」とか指定しくこともあると思うけど …