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で動画をレスポンシブに対応させる方法

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

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

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

iphoneのUIのようなボタンをCSS3を使用して作ってみた。

CSS3なども使用して、iphoneの設定画面のようなインターフェースみたいなデ …

【CSS】画像の横のテキストを中央に配置するには

よく画像の真横にテキストを配置するときにわざわざCSSでfloatさせて・・・な …

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

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

【CSS】ブロック要素の右寄せ

ブロック要素のセンター揃えは、まぁ分かりますが、今更ながら右寄せってどうやるんだ …

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

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

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

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

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

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

【CSS】画像をスマホ対応!!ウィンドウに合わせて自動で拡大・縮小させるには?!

ここ最近はスマホが主流になってきているのでレスポンシブなWEBサイトを作ることも …