###ヘッターをdisplay: flexで綺麗に並べたいのですがうまくできません…
アイコンは左端、タイトルは真ん中、ハンバーガーマークは右端におきたいとと考えています
全体の親要素top-page-headerにjustify-content: space-around
をつけていますが現状PhotoロケのアイコンがPhotoロケアイコンの親要素photoroke-iconからはみ出てしまいます
原因としてヘッターの左にあるアイコンにトップページに戻るようにを指示する為に記述している
####a要素
が原因です
解決策ご存知の方いらっしゃいましたらご回答よろしくお願いいたします!
hetena19様よりご指摘いただきましたので情報追加いたします!
hetena19様ありがとうございます!
html
1<header> 2 <div class='top-page-header'> 3 <%#ロゴの情報が入る%> 4 <div class='photoroke-icon'> 5 <a href="/"> 6 <img class='photoroke-icon-photo'src="/assets/Photoroke_logo.png"> 7 <%# <%= link_to image_tag("Photoroke_logo.png",class:"photoroke-icon"),"/" %> 8 </a> 9 </div> 10 11 <%#ページの名前が入る%> 12 <h2 class='top-page-name'> 13 ここに各ページの名前が入ります 14 </h2> 15 16 <%#ハンバーガーアイコンが入る%> 17 <p class='hamburger'>tekisuto</p> 18 </div> 19</header>
CSS
1.top-page-header { 2 width: 100vw; 3 height: 15vh; 4 display: flex; 5 background-color:#DDDDDD; 6 justify-content: space-around; 7 align-items: center; 8 position: fixed; 9 10} 11/* a{ 12 box-sizing: border-box; 13 text-decoration: none; 14 width: 20%; 15 margin-left: 5vw; */ 16 17.photoroke-icon{ 18 width: 100%; 19 margin-left: 5vw; 20 height: 100%; 21} 22 23.photoroke-icon-photo{ 24 max-width: 100%; 25} 26 27.top-page-name{ 28 background-color: cornflowerblue; 29 height: 50%; 30 font-size: 3vh; 31} 32 33.hamburger{ 34 background-color: darkgreen; 35 width: 100px; 36 height: 50px; 37 margin-right: 5vw; 38}
現在のコードはこのようになっています
質問させていただいた時と少し形が違いますがまだ解決はできていません。
回答2件
あなたの回答
tips
プレビュー