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のanimationによるキーフレームアニメーションをやってみた。

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

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

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

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

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

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

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

【html5】videoタグで背景に動画を再生させる方法とは!?

動画を背景で再生させるとサイトがダイナミックになりますよね♪ 例えば下記のような …

【CSS】スマホでヘッダー部分を固定させるには!?

最近は、スマホサイトやらレスポンシブやらばっかですね(笑)。とまぁそんなこんなで …

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

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

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

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

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

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

【CSS】のinline-blockで要素を横並びにしてみた!

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