ナビゲーションバーを作りたいんですが、divタグの中にaタグを複数入れると改行されてしまい、レイアウトが難しいです。

補足

真ん中の要素は画面中央に配置したいです

HTML、CSS45閲覧

ベストアンサー

0

その他の回答(3件)

0

● CSS ul.menu-list {width: 450px; display: flex; justify-content: space-between; margin: auto; padding: 0;} .menu-list li {display: inline-block; text-align: center; width: 100px;} .menu-list li a {display: block; text-decoration: none; color: aliceblue; background-color: #333; border-radius: 5px;} .menu-list li a:hover {color: orange;} ● HTML <nav> <ul class="menu-list"> <li><a href="#">要素1</a></li> <li><a href="#">要素2</a></li> <li><a href="#">要素3</a></li> </ul> </nav> ・flexbox を理解できるでしょうか? ・li 要素に display: inline-block を適用すると、勝手にマーカーが消えます。 ・ul 要素や li 要素は padding を持つので、対策をしないと中央よりも右にずれます。 ・a 要素に display: block を適用してボタン化を行いましたので、ボタン内の文字のないところをクリックしてもジャンプできます。 ・CSS の最後の1行はオマケです。ボタンの上にマウスカーソルを置くと文字色がオレンジに変わります。

0

駄犬さん >・・・divタグの中にaタグを複数入れると改行されてしまい・・・・・・ ご参考に↓ https://www.tohoho-web.com/css/prop/flex.htm https://creive.me/archives/15427/ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> .box{ display:flex; justify-content:space-around; } </style> </head> <body> <div class="box"> <a href="#">要素</a> <a href="#">要素</a> <a href="#">要素</a> </div> </body> </html>

0

CSSでスタイルをコントロールしていくことになるわけですが、ご質問を拝見するにCSSの知識をお持ちではなさそうなので、チュートリアルに従って作るか、WordPressやSilverStripeのようなCMSをお使いなら、テーマに付属のナビゲーションを使う、またはプラグインを使う等が良い気がします。 例えばこんなチュートリアル。 https://lab.sonicmoov.com/markup/css/css-navigation-menu/ あるいは、CSSをきちんと勉強なさってから挑戦するか。 単に改行を防ぐとおっしゃっても、ではモバイルで見た場合はどうするのか、モバイルとデスクトップナビゲーションの切り替えはどこに設定するのか等、実際にモノを見てみないと何とも言えないのに加え、まあまあややこしいです。