Q&A
メニューリストの間にロゴ画像を入れ込みたいです。
コーディングを行ったのですが、その際に、下記のような形でメニューリストをロゴ画像前と後で二つに分けて対応をしました。
<nav class="gnav"> <ul class="gnav__list-left"> <li class="gnav__item"><a href="#">Menu1</a></li> <li class="gnav__item"><a href="#">Menu2</a></li> </ul> <div class="header__logo"> <img src="img/logo.png" alt="" class="header__logo-img"> </div> <ul class="gnav__list-right"> <li class="gnav__item"><a href="#">Menu3</a></li> <li class="gnav__item"><a href="#">Menu4</a></li> <li class="gnav__item"><a href="#">Menu5</a></li> </ul> </nav>
リストをロゴ画像前と後で2分割しなくてもいいように同じことを実現する方法があったら教えていただけないでしょうか？
よろしくお願いいたします。
現在のソースコードは下記の通りとなります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link rel="stylesheet" href="css/test.css"> </head> <body> <header class="header"> <div class="header__inner inner"> <!-- リスト間にロゴを入れるため、仕方なくリストを二つに分けている。。 --> <nav class="gnav"> <ul class="gnav__list-left"> <li class="gnav__item"><a href="#">Menu1</a></li> <li class="gnav__item"><a href="#">Menu2</a></li> </ul> <div class="header__logo"> <img src="img/logo.png" alt="" class="header__logo-img"> </div> <ul class="gnav__list-right"> <li class="gnav__item"><a href="#">Menu3</a></li> <li class="gnav__item"><a href="#">Menu4</a></li> <li class="gnav__item"><a href="#">Menu5</a></li> </ul> </nav> </div> </header> </body> </html>
//----------------------------------------------------- // ヘッダー //----------------------------------------------------- .header{ background-color: #3F51B5; &__inner{ width: 980px; margin: 0 auto; max-width: 100%; height: 100px; text-align: center; } &__logo{ display: inline-block; vertical-align: middle; &-img{ width: 200px; height: 39px; } } } .gnav{ &__list{ &-left{ display: inline-block; margin-right: 50px; letter-spacing: -0.5em;//inline-block間の隙間対策 } &-right{ display: inline-block; margin-left: 50px; letter-spacing: -0.5em; } } &__item{ display: inline-block; height: 100px; width: 100px; line-height: 100px; list-style: none; border-right: 1px solid #fff; border-left: 1px solid #fff; letter-spacing: normal;//inline-block間の隙間対策 a{ text-decoration: none; color: #fff; } } }
回答1件
0
ベストアンサー
liのbackground-imageにするとか？
ちょっと雑すぎたので+αで
HtML
1<!-- 省略 --> 2</li> 3<!-- 省略 --> 4</ul> 5<!-- 省略 --> 6<div ....> 7<!-- 省略 --> 8</div> 9<!-- 省略 --> 10<ul> 11<!-- 省略 --> 12<li ...> 13<!-- 省略 -->
を
HTML
1<!-- 省略 --> 2</li> 3 4<li ...></li><!-- ここにbackground-imageでロゴを指定 --> 5 6<li ...> 7<!-- 省略 -->
なかなかうまく説明できません。
疑問点ありましたらコメントの方よろしくお願いします。
投稿2019/09/25 02:40
編集2019/09/25 02:50
総合スコア10429
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/25 03:42
2019/09/25 04:18