Q&A
左側の画像(logo.png)をaタグで囲むと、二枚目の画像のようにリンクの範囲が横に大きくなってしまい、右側のリンクが潰されて改行されてしまいます。
なぜこのように変化してしまうのか、また、この解決策をご教授ください。
aタグで囲む前
aタグで囲む後
HTML
<header> <a href="index.html"><img src="logo.png" alt="ロゴ"></a> <nav> <ul> <li><a href="time.html">営業時間</a></li> <li><a href="guide.html">フロアガイド</a></li> <li><a href="access.html">交通アクセス</a></li> <li><a href="sale.html">お得なポイント</a></li> <li><a href="corp.html">運営企業</a></li> </ul> </nav> </header>
CSS
@charset "utf-8"; * { margin:0; padding:0; box-sizing: border-box; } html { overflow-y:scroll; scroll-behavior: smooth; } body{ background-color: #ffffff; font-size: 95%; font-family: "BIZ UDPゴシック", Verdana, "Roboto", "Droid Sans", "游ゴシック", "YuGothic", "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Pゴシック", sans-serif; line-height: 150%; color: white; } a{ text-decoration: none; color: #eeeeee; } a:hover{ text-decoration: underline; } /*ヘッダー*/ header { padding: 1% 6% 1%; position: fixed; top: 0; width: 100%; background-color: #2c2c2c; display: flex; align-items: center; } header img{ margin: 0; padding: 0; width: 20%; } header a{ display: block; } header a:hover{ text-decoration: underline; } nav { margin: 0 0 0 auto; } ul { list-style: none; margin: 0; display: flex; } li { text-decoration: none; margin: 0 0 0 15px; font-size: 14px; }
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。