前提
画像(タイトル)とその下に文字を挿入したい
実現したいこと
・画像の上部の色を付いている範囲内に画像と文字を挿入したい
(下記に挿入したい部分の画像あり)
・バルーンキッチンの「usecase 」と「こんなときどんなバルーンを贈ると喜ばれるの?・・・・・♪」みたいな感じにしたい
リンク内容https://www.balloon-kitchen.com/
発生している問題・エラーメッセージ
・挿入したい箇所とは別の場所に挿入される ・挿入したら画像が縦に並ぶようになってしまう(並びがおかしくなる)
該当のソースコード
THML <div style="text-align: center;"> </div> <ul class="iconlist"> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> <li><a href="http://"><img alt="○○" src="https://img07.shop-pro.jp/PA01352/367/etc/card_A_star.jpg?cmsp_timestamp=20220814181604" style="height: 130px; width: 130px;" /></a></li> </ul> CSS <style type="text/css">ul.iconlist { display: flex; flex-wrap:wrap; justify-content:center; gap: 10px; margin-top: 120px; margin-bottom: 120px; padding-top: 100px; padding-bottom: 30px; background:#f1ecd9 ; </style> <style type="text/css">p{ word-break:keep-all; } </style>
試したこと
・<li>を<p>で囲む
・<li>のリンクを抜いて<br>を付ける
補足情報(FW/ツールのバージョンなど)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。