1:ID:Wd1AhI 1週間前

#質問 初めまして。
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 1週間前
Media Queriesを設定しようぜ
3:ID:RUGK1. 1週間前
まずulとliの間にタグ入れちゃだめよ。
4:ID:i/J2Vl 1週間前
reset.cssは使いましたか?あれがないと改行や空白で隙間ができることがあります。
5:ID:hEpi42 1週間前
なんかどこから突っ込んでいいのかわからんぐらいダメなコーディングだな。
ダメなところ書いてやる。

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

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

それぐらい書かないとわからん。
6:ID: 削除
7:ID: 削除
8:ID: 削除
9:ID: 1週間前
皆様、たくさんのご指摘をありがとうございます。
まず、情報不足であったことをお詫び致します。

引き継いだ通販サイトの表示改善をに取り組んでおります。周囲に相談できる環境がなく、目下、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 1週間前
idが二回出てきてるぞ
11:ID:Ht6v4d 4日前
ul{width:100%;}
li{width:25%;}
li img{width:100%;}
みたいな指定じゃだめなのか?
コメントの受付は終了しました。

一緒に読まれているつぶやき

ページ上部に戻る