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】のinline-blockで要素を横並びにしてみた!

今更の話ですが、ナビゲーションを作成するときは、結構「float」を利用して横並 …

CSS3で作る可変タイプのナビゲーション

さてさて、そろそろCSS3が普通に利用されてきてますね。なんてったてスマートフォ …

【CSS】CSSで行ごとに背景色を交互に変更するには?

結構、新着情報などの背景色を交互に表示して行ごとに分かりやすくしているサイトを見 …

cssで幅を指定しない要素を横並びにする

ちょいちょい忘れるんでメモ。良く画像とテキストの横並びさせることがあるが、個人的 …

CSS3のbox-flexで要素が伸縮する比率を決める

今回は、子要素のボックスが伸縮する比率を決める場合の処理をメモ。 ボックスの伸縮 …

[CSS]スマホ制作で大活躍!?table-cellで要素を横並びに配置する方法

前回、要素を横並びにするのに inline-block を使ったんですが、なんと …

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

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

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

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

CSSで写真をテープで止めた様な装飾をしてみた

たまに見る、写真をセロテープで止めた感じの画像の見せ方。以前は画像でしたが、CS …

CSS3のanimationによるキーフレームアニメーションをやってみた。

今回は前回に引き続いてCSS3の「animation」プロパティについてメモって …