エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
display:flexを使った横並びメニューの書き方 - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
display:flexを使った横並びメニューの書き方 - Qiita
はじめに display:flexを使った横並びメニューの書き方をまとめました。 事前準備 ulタグにメニューの内... はじめに display:flexを使った横並びメニューの書き方をまとめました。 事前準備 ulタグにメニューの内容を記述し「list-style:none」を指定して縦に並べておきます。 見やすいようにデザインも少し整えておきます。 <ul> <li class="btn">menu1</li> <li class="btn">menu2</li> <li class="btn">menu3</li> <li class="btn">menu4</li> <li class="btn">menu5</li> </ul> /**list-styleを指定する**/ ul{ list-style: none; } /** 見た目を整える **/ body,ul,li{ margin:0px; padding:0px; } .btn{ padding:10px 30px; margin:2.5