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]スマホ制作で大活躍!?table-cellで要素を横並びに配置する方法

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

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

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

CSS3で写真風に装飾をするには!?

最近は、各ブラウザもCSS3に対応してきてるので割と装飾もCSS3でやってしまお …

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

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

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

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

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

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

【CSS】text-overflowで長い文章を「・・・」で省略する方法は?

ボックスからはみ出した文章が下に回りこむとボックス要素の高さが変わったりして嫌だ …

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

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

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

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