メニューバーの上に電話番号を配置したい。 bodyのweight をブラウザのサイズに合うようにしたい。

画像

ベストアンサー

0

その他の回答(1件)

0

ヤマウチさん >・・・・メニューバーの上に電話番号を配置したい・・・・・・・・ まず、そのまずい HTMLを提示したほうが欲しい答えが得やすいです。 まず先の回答に追加すれば出来ますが。↓ https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13242873703 ご参考に↓ <!DOCTYPE html> <html> <mefta charset="UTF-8"> <style> section{ width: 1080px; margin: 0 auto; border:1px #333 solid; } header{ text-align:right; } .top-nav { list-style-type:none; display:flex; justify-content:center; margin:4px auto; padding:8px; } .top-nav a { margin:5px; border-radius:5px; background:#6B9; color:#fff; padding:8px 10px; text-decoration: none; } .top-nav li:first-child { margin: 0 10px; } .top-nav li:nth-child(2) { margin-right: auto; } .top-nav .logo { background: #fff; } .top-nav .logo img { width:100px; height:20px; } #main { background: url(https://s.yimg.jp/images/ks/official/nt/grd/prf_150.png) no-repeat top right; background-size: contain; height:600px; margin: 0 auto; } </style> <body> <section> <header>電話番号</header> <ul class="top-nav"> <li><a href="#" class="logo"><img src="https://s.yimg.jp/c/logo/f/2.0/yj_r_34_2x.png" ></a></li> <li><a href="#" class="logo"><img src="https://s.yimg.jp/c/logo/f/2.0/yj_r_34_2x.png" ></a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> <div id="main"> <p>①添付画像のようにメニューバーの上に電話番号を配置したいです。 ・bodyにweight:1080px;を適用しているせいかブラウザで確認した際に右側に隙間が空いてしまいます。どのブラウザで見ても綺麗に見れるようにしたいです。</P> <p>②トップ画面に設定した画像は理想形通りになっていますが その他の要素は全て右側に隙間ができている状態になります。</P> <p>そもそも、問題のページの HTMLソース提示しなければ、貴方のレベルに合わせた的確な答えは得られませんが。</P> </div> </section> </body> </html>