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

  関連記事

CSS3のセレクターで属性チェックする

css3のセレクターで気になったものをメモる。 ただ普段jqueryを使っている …

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

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

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

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

【CSS】レスポンシブルで可変+固定レイアウトで組む

最近は、レスポンスWebが流行りそうというか話題になってるけど、デバイスが多すぎ …

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

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

CSS3のflexboxでボックスレイアウトを組んでみる

2013年7月1日現在ですは、flexboxの仕様が変わった為、この記事は古い記 …

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

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

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

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

フッター要素を常に下付きにしたい

案件にて、フッター要素を下付きにしたいということで調べてみたのでメモ。 案件にも …

【CSS】スマホで幅100%で要素がはみ出してしまう原因と対策

スマホページを作成しているたまに発生するのが幅を100%にしているのに微妙に横に …