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

  関連記事

【jQuery】facebook風スライドメニューをちょっと作ってみた結果

最近、皆さんfacebookを日々使ってると思いますがあのメニューを左からスライ …

【CSS】CSS3でFlexboxの水平方向と垂直方向の揃え方とは!?

このブログでも、何回か記事にした事もあるCSS3のFlexboxについての記事で …

CSS3 Transitionでアニメーションさせてみる。

ここ最近CSS3だけでの表現力もすごくなってきたので、そろそろ見ておこうと思って …

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

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

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

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

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

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

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

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

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

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

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

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

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

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