基本的なことですが、どうしても分からないためこの場を借りて質問させていただきます。
下にある画像を見てもらえばわかると思いますが、boxrankの中のliリストの中に、ranking.gifという画像が格納されています。
私はこのリストの中の画像をリスト内の左端に移動させたいのですが、なぜか動かすことができません。
改善するまでにこれまでにやったこと
・img要素のblockレベル化、padding-left:0;、margin-left:0;、text-align:left;
・ranking.gifが他の画像に回り込まれないように、width:1000px;を指定
・htmlのdiv要素のalign:center;解除
・boxrank、boxrank ul li、li.rankimg、rankimg、img.rank-imgの様々の要素をそれぞれ
padding-left:0;、margin-left:0;、text-align:left;を指定
これらすべてをやっても、改善することができませんでした。
なぜリストの中の画像をリスト内の左端に移動できないでしょうか?
大変恐れ入りますが、この問題のわかる方、ご回答いただけると幸いです・
よろしくお願いします。
念のため、私のURLを記載させていただきます。URL
HTML
<div align="center" class = "boxrank"> <ul> <li class="rankimg"><img src="box img/box rank/ranking.gif" alt="" class="rank-img"></li> <li class="clearfix"><img src="box img/box rank/ranking-1.gif" alt=""></li> <li class="clearfix"><img src="box img/box rank/ranking-2.gif" alt=""></li> <li class="clearfix"><img src="box img/box rank/ranking-3.gif" alt=""></li> <li class="clearfix"><img src="box img/box rank/ranking-4.gif" alt=""></li> </ul> </div> コード
CSS
.boxrank ul li{ padding-left: 0px; list-style:none; display:inline-block; } .rankimg{ width:1000px; } li.rankimg{ padding-left: 0px; } .boxnews{ text-align: center; } .boxnews ul li{ padding-left: 0px; list-style:none; display:inline-block; } コード
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/31 04:12