1:ID:Wd1AhI · 2017-10-13

#質問 初めまして。
HTMLについて質問です。

リンク付き画像を横に4つ並べると解像度が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 件の回答

2:ID:EelsL5 · 2017-10-13

Media Queriesを設定しようぜ

3:ID:RUGK1. · 2017-10-13

まずulとliの間にタグ入れちゃだめよ。

4:ID:i/J2Vl · 2017-10-13

reset.cssは使いましたか?あれがないと改行や空白で隙間ができることがあります。

5:ID:hEpi42 · 2017-10-13

なんかどこから突っ込んでいいのかわからんぐらいダメなコーディングだな。
ダメなところ書いてやる。

・htmlのルール勉強しろ
・ulの直下はliのみだ。他のタグ入れてはいかん
・divなどいらん。ulにdivに行いたい命令書けば十分。

①どの画面解像度でもつねに画像が横並びで4つ表示されてほしいのか?
②どの画面解像度でも常に画像が端から端まで4つに当分割されてほしいのか?
③スマホとかの時は画像はどのように表示されてほしいのか?PCオンリーでいいのか?

それぐらい書かないとわからん。

9:ID: · 2017-10-14

皆様、たくさんのご指摘をありがとうございます。
まず、情報不足であったことをお詫び致します。

引き継いだ通販サイトの表示改善をに取り組んでおります。周囲に相談できる環境がなく、目下、HTMLを勉強中の身でして非常に有難いです。上記のHTMLはスマホサイトのものです。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;}

10:ID:hEpi42 · 2017-10-14

idが二回出てきてるぞ

11:ID:Ht6v4d · 2017-10-19

ul{width:100%;}
li{width:25%;}
li img{width:100%;}
みたいな指定じゃだめなのか?

3 件の回答が除外されました。[詳細]
コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る