おしえて

navの横並びにsnsアイコンを付けたい

締切済

質問者：ハコ2222
質問日時：2020/09/25 06:52
回答数：3件

いつもお世話になっております。表題の件よろしくお願いいたします。

navをdisplay: flex　で横並びにし、さらにその最後尾にSNSのアイコンを並べたいです。
nav の内容をjustify-content: flex-end;で右寄せにしたいのですが、アイコンの画像を足したらうまくいきません。どのようなcssの記述に知れば良いでしょうか？

html
<nav>
<ul>
<li>お知らせ</li>
<li>料金プラン</li>
<li>導入マシン</li>
</ul>
<div class="sns">
<a href="https://www.instagram.com/jibun_sagashi/" target="_blank"><img src="images/Instagram_icon-icons.com_66804.svg" width="10%" alt="インスタロコ"></a>
<a href="https://www.facebook.com/%E3%83%AC%E3%83%B3%E3%8 … target="_blank"><img src="images/facebook_icon-icons.com_59205.svg" width="10%" alt="フェイスブックロコ"></a>
</div>
</nav>
----------------------------
css
nav{
display: flex;
justify-content: flex-end;
}
nav ul {
display: flex;
justify-content: flex-end;
padding-right: 20px;
}

nav li {
list-style: none;
padding-left: 20px;
}

-----------------------------

このような記載をしています。
記載方法が悪ければ修正いたします。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： gura_
回答日時：2020/09/27 10:57

ハコ2222さん

･････SNSのアイコンを並べたい･･････････････

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
nav{ background:#eee;
display: flex;
justify-content: flex-end;
}
nav ul { margin:0; /* 追加 */
display: flex;
justify-content: flex-end;
padding-right: 20px;
}

nav li {
list-style: none;
padding-left: 20px;
}

.sns img{ vertical-align: middle; } /* 追加 */
</style>

</head>
<body>
<nav>
<ul>
<li>お知らせ</li>
<li>料金プラン</li>
<li>導入マシン</li>
</ul>
<div class="sns">
<a href="https://www.instagram.com/jibun_sagashi/" target="_blank"><img src="https://oshiete.xgoo.jp/images/v2/common/profile … width="20%" alt="インスタロコ"></a>
<a href="https://www.facebook.com/%E3%83%AC%E3%83%B3%E3%8 … target="_blank"><img src="https://oshiete.xgoo.jp/images/v2/common/profile … width="20%" alt="フェイスブックロコ"></a>
</div>
</nav>
</body>
</html>

- 0
- 件

通報する

参考程度に

No.2

回答者： fujillin
回答日時：2020/09/25 11:56

こんにちは

すでに回答がありますが、ご説明の通りに表示されているようです。

＞アイコンの画像を足したらうまくいきません。
何が意図と違うのでしょうか？
もしかすると、高さ方向が揃わないってことでしょうか？

もしもそうだとするなら、原因は、ulのデフォルトマージンでul要素のtopに空きがとられていることかと想像します。
ulのマージンを無くすか、divにマージンを与えるか、あるいはnavのCSSに
　align-items: center;
を付け加えるなどで、高さ方向を揃えることが可能になると考えられます。

ご質問の意味が違っていたら、スルーしてください。