前提・実現したいこと
ここに質問の内容を詳しく書いてください。
(例)ホームページを作成しており、CSSでコーディング作業中です。
文字幅が横に飛び出てしまうというエラーで困っています。
画像幅と同じ幅で文字が収まるようにしたいです。
発生している問題・エラーメッセージ
画像(images/header.jpg)の幅よりも左右に文字(ラーメン屋、ご予約/お問い合わせ)が飛び出てしまう。
該当のソースコード
【HTML】 <div class="boxA"> <div class="box1"> <h1>ラーメン屋</h1> </div> <nav class="box2"> <ul> <li><a href="">ラーメン屋とは</a></li> <li><a href="">お品書き</a></li> <li><a href="">お知らせ</a></li> <li><a href="">アクセス/店舗情報</a></li> <li><a href="">ご予約/お問い合わせ</a></li> </ul> </nav> </div> <!-- header画像 --> <div class="header-images"> <img src="images/header.jpg"> 【CSS】 header {padding-top: 10px;} .box1 h1 { font-size: 20px; opacity: 0.7;} .box2 a { position: relative; display: inline-block; text-decoration: none;} .box2 a::after { position: absolute; bottom: -4px; left: 0; content: ''; width: 100%; height: 1.2px; background: #333; transform: scale(0, 1); transform-origin: left top; transition: transform .3s;} .box2 a:hover::after { transform: scale(1, 1);} .boxA: { position: relative; z-index: 2;} .box1 { float: left; width: auto;} .box2 { float: right; width: auto;} .box2 ul { margin: 0; padding: 0; list-style: none;} .box2 ul:after { content: ""; display: block; clear: both;} .box2 li { float: left; width: auto;} .box2 li a { display: block; margin: 10px; font-size: 14px; text-decoration: none; color: #000; opacity: 0.7; font-weight: 300;} /* header画像 */ .header-images { text-align: center; position: relative;}
試したこと
min-width:1140px;を.boxAに記載してみましたが駄目でした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
画像のサイズ(縦横ピクセル数)を提示してください。
後サイズだけではなく実際どのサイズで表示したいかも記載してください
回答3件
あなたの回答
tips
プレビュー