cssでメニューを横並びにする簡単なやり方

こんにちは。てんとう虫です。
メニューを横並びにする方法はfloatを使う方法等色々ありますが、
display: flex;を使う方法を備忘録的に書きます。

HTMLコード

<ul>
  <li>HOME</li>
  <li>WORK</li>
  <li>COMPANY</li>
  <li>FORM</li>
</ul>

cssコード

.flex{
  display: flex;
}

表示結果

  • HOME
  • WORK
  • COMPANY
  • FORM

.flexに対して、cssでdisplay:flexを記述するだけです。

簡単です。しかし一点注意!

現在はChrome28、Firefox22、IE11からしか対応していません。

それではまた。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告
  • このエントリーをはてなブックマークに追加
スポンサーリンク
レクタングル(大)広告

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です