前提・実現したいこと
宜しくお願い致します。
ホームページのリニュアルをしています。(初心者です)
ヘッダー部分の黒丸とinstagramマークを横並びに綺麗にしたいのですが、縦並び尚且つ場所の収まりが悪く、
スマホで見たときにはハンバーガーメニューとのバランスも悪いです。
発生している問題・エラーメッセージ
ヘッダーがうまく配置ができません。
該当のソースコード
下記の<div class="title">内
<div class="header"> <div class="header-top"> </div> <div class="header-area"> <div class="header-layout"> </div></div> </div><a class="menu-trigger" href="javascript:;"><span></span><span></span><span></span></a> <div class="navi"> <ul> <li><a title="#mens">MEN</a> <ul> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000619/?s=4#risFil/top">NEW ARRIVAL</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000179/?s=4#risFil/top">OUTER</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000969/?s=4#risFil/top">SHIRTS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000119/?s=4#risFil/top">TOPS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000105/?s=4#risFil/top">BOTTOMS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000170/?s=4#risFil/top">SHOES</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000189/?s=4#risFil/top">BAG</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000373/?s=4#risFil/top">GOODS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000133/?s=4#risFil/top">ACCESSORY</a></li> <li><a href="https://item.rakuten.co.jp/coupy/c/0000001563/?s=4#risFil/top">OUTLET</a></li> </ul> </li> <li><a title="#ladies">WOMEN</a> <ul> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000618/?s=4#risFil/top">NEW ARRIVAL</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000153/?s=4#risFil/top">OUTER</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000128/?s=4#risFil/top">TOPS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000129/?s=4#risFil/top">ONEPIECE</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000121/?s=4#risFil/top">BOTTOMS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000148/?s=4#risFil/top">SHOES</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000155/?s=4#risFil/top">BAG</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000393/?s=4#risFil/top">GOODS</a></li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000141/?s=4#risFil/top">ACCESSORY</a></li> <li><a href="https://item.rakuten.co.jp/coupy/c/0000001564/?s=4#risFil/top">OUTLET</a></li> </ul> </li> <li><a href="http://item.rakuten.co.jp/coupy/c/0000000965/?s=4#risFil/top"><span>LIFE STYLE</span></a></li> <li><a href="#brand">OUTLET</a> <ul> <li><a href="https://item.rakuten.co.jp/coupy/c/0000001563/">MENS</a></li> <li><a href="https://item.rakuten.co.jp/coupy/c/0000001564/">LADIES</a></li> </ul> <li><a href="#brand">BRAND</a> <ul> <li><a href="https://www.rakuten.ne.jp/gold/coupy/brand-mens.html">MENS</a></li> <li><a href="https://www.rakuten.ne.jp/gold/coupy/brand-ladies.html">LADIES</a></li> </ul> </li> <li><a href="http://www.rakuten.ne.jp/gold/coupy/shoppingguide.html">SHOPPING GUIDE</a> <ul class="last"> <li><a href="http://www.rakuten.ne.jp/gold/coupy/shoppingguide.html#payment">お支払いについて</a></li> <li><a href="http://www.rakuten.ne.jp/gold/coupy/shoppingguide.html#delivery">発送について</a></li> <li><a href="http://www.rakuten.ne.jp/gold/coupy/shoppingguide.html#shop">実店舗情報</a></li> <li><a href="http://www.rakuten.ne.jp/gold/coupy/shoppingguide.html#infomation">お問い合わせ</a></li> <li><a href="https://www.rakuten.co.jp/coupy/news.html">メールマガジン</a></li> <li><a href="https://basket.step.rakuten.co.jp/rms/mall/bs/cartempty/?shop_bid=208695">カート</a></li> </ul> </li> </ul> </div> <div class="title"> <li><a href="http://www.rakuten.ne.jp/gold/coupy/index.html"><img src="img/top_icon_maru-01.png"></li> <li><a href="https://www.instagram.com/jeune_en_ligne/" target="_parent"><img src="https://image.rakuten.co.jp/coupy/cabinet/top/instagram.jpg" width="35"></a></li> </div> </div>
ソースコード
試したこと
displayをinlineblockに変更
floatを変更
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
>初心者です。
要件とは関係ないので初心者アイコンをつけてください
https://teratail.com/help/question-tips#questionTips3-1
[ありがちな失敗としては、「助けてください」「初心者です」という表題をつけてしまうことです。]
コードはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/help#about-markdown
※質問は編集できますので適宜ご対応ください
その具合悪いというスクリーンショットを提示できませんか
レイアウトに関する場合は、HTMLだけでは判断出来ません。CSSも提示してください。
また、提示コードで、タグの入れ子(親・子・孫等)には「インデント」を付けると、見やすくなり、間違いも見つけやすくなります。
あなたの回答
tips
プレビュー