Q&A前提・実現したいこと
ニュースサイトのようなシステムを練習で作っています。
「Sign in」という文字の左横に青い人型のアイコンを置くときに以下のようにグルーバルナビの形が崩れてしまい、うまくいきません。わかる方、ご教示願います。
崩れてしまった図↓
完成させたい図↓
該当のソースコード
<!DOCTYPE html> <html> <head> <meta content="ja"> <meta charset="utf-8"> <style type="text/css"> .globalnav ul li{ list-style: none; width: 150px; float: left; } .globalnav ul{ margin: 0; padding: 0; display: flex; align-items: center; } li+ li{ border-left: 1px solid #333; text-align: center; } a{ text-decoration: none; } </style> </head> <body> <nav class="globalnav"> <ul> <li><img src="newslogo.png" width="100" height="60"></li> <li><a href="#"><img class="signin" src="signin.png" width="30" height="30">Sign in</a></li> <li><a href="#">News</a></li> <li><a href="#">Sport</a></li> <li><a href="#">Weather</a></li> <li><a href="#">i Player</a></li> <li><a href="#">TV</a></li> <li><a href="#">More</a></li> </ul> </nav> </body> </html>
試したこと
nav要素の中に青い人型のアイコン画像を入れてもうまくいかず、
nav要素の外に出してもうまくいきませんでした。
補足情報（FW/ツールのバージョンなど）
エディタ：Brackets
OS：windows10
ブラウザ：GoogleChrome
回答2件
0
ベストアンサー
flexboxって便利
投稿2018/09/02 06:44
総合スコア1284
0
アイコン画像とテキストを画像化することで解決しました。さらに良い方法があればご教示願います。
投稿2018/09/02 02:10
総合スコア74
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/02 08:20
2018/09/02 11:19