#質問
初めまして。
HTMLについて質問です。
リンク付き画像を横に4つ並べると解像度が４つの画像より大きい場合は右端に不自然な隙間が出来、小さい場合は改行されてしまいます。
<ul id="a">
<h2></h2>
<div class="b">
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
</div>
<div class="b">
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
</div>
</ul>
上記がHTML、下記がCSSです。
.b{width:100%;display:inline-block;}
<div class="b"></div>で区切ってCSSでwidth:100%;を設定すれば解像度に合わせて4つの画像がいっぱいに並ぶようになるかと思うのですが。。
原因と対応法を教えて頂ければと思います。
宜しくお願い致します。
一緒に読まれている質問
10 件の回答
Media Queriesを設定しようぜ
まずulとliの間にタグ入れちゃだめよ。
reset.cssは使いましたか？あれがないと改行や空白で隙間ができることがあります。
なんかどこから突っ込んでいいのかわからんぐらいダメなコーディングだな。
ダメなところ書いてやる。
・htmlのルール勉強しろ
・ulの直下はliのみだ。他のタグ入れてはいかん
・divなどいらん。ulにdivに行いたい命令書けば十分。
①どの画面解像度でもつねに画像が横並びで4つ表示されてほしいのか？
②どの画面解像度でも常に画像が端から端まで4つに当分割されてほしいのか？
③スマホとかの時は画像はどのように表示されてほしいのか？PCオンリーでいいのか？
それぐらい書かないとわからん。
皆様、たくさんのご指摘をありがとうございます。
まず、情報不足であったことをお詫び致します。
引き継いだ通販サイトの表示改善をに取り組んでおります。周囲に相談できる環境がなく、目下、ＨＴＭＬを勉強中の身でして非常に有難いです。上記のＨＴＭＬはスマホサイトのものです。PCサイトも別にあります。
スマホサイトのみの場合もMedia Queriesは必要でしょうか？
調べたところ、normalize.cssが導入されているようです。
該当すると思われるCSSを転載します。
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
まず、イメージとしてはどのような解像度（スマホ）でも下記の様に横4つ、縦2つに画像を表示させることがゴールです。
■■■■
■■■■
補足
・それぞれの■は隙間なく、画面いっぱいに解像度に合わせて表示させたい
・画像は全て同じサイズなので等分割
現状
■■■■■←右端のみ少し下にずれている
■■■
画面の表示幅に合わせて画像の表示位置が変更される状況です。
ご指摘頂いた点の修正と id="a" のCSSが確認できたので追記します。
<h2></h2>
<ul id="a" class="b">
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
</ul>
<ul id="a" class="b">
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
<li><a href="">
<img src=""></a></li>
</ul>
CSS
#a p{
text-align:left;
font-size:12px;
}
#a{
padding-top:15px;
}
#a li{
list-style-type: none;
float:left;
padding-left:1px;
}
.b{width:100%;display:inline-block;}
idが二回出てきてるぞ
ul{width:100%;}
li{width:25%;}
li img{width:100%;}
みたいな指定じゃだめなのか?