ここから本文です

HTMLタグ リストの中に画像リンクを含めると文字に画像が被ってしまう

りなさん

2020/5/2219:55:51

HTMLタグ リストの中に画像リンクを含めると文字に画像が被ってしまう

HTMLタグは以下の通りです。

<ul>
<li>入居申込書(個人用) <a href="https://j-tech-kyoto.com/wp-content/uploads/2020/05/001全保連入居申込書個人用と個人情報同意書.pdf"><img src="https://j-tech-kyoto.com/wp-content/uploads/2020/05/icon_001780_256..." alt="ダウンロード" width="15px" height="15px"></a>
</li>
<li>入居申込書(法人用) <a href="https://j-tech-kyoto.com/wp-content/uploads/2020/05/002全保連入居申込書(法人用).pdf"><img src="https://j-tech-kyoto.com/wp-content/uploads/2020/05/icon_001780_256..." alt="ダウンロード" width="15px" height="15px"></a></li>
</ul>


そもそもリスト内に画像リンクを貼るのがまずいのでしょうか。
リストタグを使わずに文字列と画像リンクで表現することも検討しましたが、
CSSにてリストのアイコンを画像に指定しているため、上記の方法では毎回画像を指定しないといけないためタグが長くなるため避けたいです。

解決策を教えていただけませんか?
よろしくお願いいたします。

li&amp;gt,img src,pdf&amp;quot,全保連入居申込書,ul&amp;gt,litext&amp;quot,span class

閲覧数:
11
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

MAG.oさん

2020/5/2913:43:21

再現させてないので思い付きですが、
htmlをいじれるなら、spanタグを追加してマージンを付けたらどうでしょうか。

--html--
<ul>
<li><span class="litext">入居申込書(個人用)</span><a href="~"><img src="~" alt="ダウンロード" width="15px" height="15px"></a></li>
<li><span class="litext">入居申込書(法人用)</span><a href="~"><img src="~" alt="ダウンロード" width="15px" height="15px"></a></li>
</ul>

--css--
.litext {
margin-right: 5px;
}

質問した人からのコメント

2020/5/29 14:31:05

解決いたしました。
ありがとうございました!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる