cssで画像とリンクを横並びにする方法を教えて下さいーーーーー ┃ ┃ ┃ ┃ リンク1 リンク2

締切済

質問者：___rt
質問日時：2019/04/02 11:05
回答数：2件

cssで画像とリンクを横並びにする方法を教えて下さい

ーーーーー
┃ ┃
┃ ┃ リンク1 リンク2 リンク3
┃ ┃
ーーーーー

の様な形です。
リンク間の幅は20px、画像は120x120、
リンクはul内のli、画像はaで呼んでます

ズレてました

ーーーーー
┃ ┃
┃ ┃ リンク1 リンク2 リンク3
┃ ┃
ーーーーー

補足日時：2019/04/02 11:06
通報する

通報する

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

質問の本文を隠す

回答 (2件)

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

参考程度に

No.2

回答者： fujillin
回答日時：2019/04/02 15:44

こんにちは

内容がよくわからないので、最低限のイメージのみです。
（ハズレてても雰囲気ぐらいは伝わるのではないかと・・・）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
#sample, #sample * { margin:0; padding:0; }
#sample { min-width: 600px; }
#sample img { width:120px; height:120px; }

#sample, #sample ul { display: flex; flex-wrap: nowrap; align-items: center; }
#sample ul { list-style-type: none; }
#sample li+li { margin-left: 20px; }
</style>
</head>
<body>
<div id="sample">
<img src="A.jpg" />
<img src="B.jpg" />
<ul>
<li>リンク1</li>
<li>リンク2</li>
<li>リンク3</li>
</ul>
</div>
</body>
</html>