駄犬

2022/1/12 5:58

44回答

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

ナビゲーションバーを作りたいんですが、divタグの中にaタグを複数入れると改行されてしまい、レイアウトが難しいです。 改行を防ぐ方法は無いのでしょうか？ ナビゲーションは大きくわけて 要素、要素、要素 のようになっており、1番右の要素の右のの余白を1番左の要素の左の余白と合わせたいのですが

補足

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

HTML、CSS・45閲覧

ベストアンサー

0
leg********

2022/1/12 10:31

divタグの中にaタグを入れても普通改行されないので、改行されるとしたらaタグがブロックになっているんだと思います。 とりあえずaタグをinline-blockに設定しなおせばですが、どのような形でblockになっているのかわからないので、単純にinline-blockを設定するだけではblockの設定を上書きできないと思います。 もしくはdivにdisplay:flexを設定するか。最終的にはこの判断になると思います。

その他の回答（3件）

0
fengxian

カテゴリマスター

2022/1/12 10:36

● 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="#">要素１</a></li> <li><a href="#">要素２</a></li> <li><a href="#">要素３</a></li> </ul> </nav> ・flexbox を理解できるでしょうか？ ・li 要素に display: inline-block を適用すると、勝手にマーカーが消えます。 ・ul 要素や li 要素は padding を持つので、対策をしないと中央よりも右にずれます。 ・a 要素に display: block を適用してボタン化を行いましたので、ボタン内の文字のないところをクリックしてもジャンプできます。 ・CSS の最後の１行はオマケです。ボタンの上にマウスカーソルを置くと文字色がオレンジに変わります。

0
ybb********

カテゴリマスター

2022/1/12 8:09

駄犬さん >･･･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
acc********

2022/1/12 7:39

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