<ul><li>で画像が均等配置せずレイアウト崩れしてしまいます。
いつもお世話になります。
添付画像のように、#rightmenuのul#resultList内で<li>を使用して110pxの画像を5つ均等に配置させそれぞれの隙間には10pxの空間を空けて配置したいと考えています。
左から4つの画像は#resultList li {}でpadding-right:10px;で余白を作り、5番目の画像は逆に余白がないように#resultList li.mustright 指定でpadding-right:none;設定です。
ところがそんな設定していないのに、何故か間には20pxほどの空白ができ、そのため一番右端の画像がレイアウト崩れして下段に落ちてしまいます。CSSもしくはHTMLの記述のどこがいけないのでしょうか?どうか教えてください。ちなみに並べたい画像はクリックするとthickboxで大きな画像が表示できるようにしたいと考えています。
●HTML
<div id="rightmenu">
<div id="rightbox-inside">←背景にコンテンツの外枠となる画像の上部表示用
<div id="rightbox-inside-txt">
<p class="title">タイトル</p>
<p class="standard-title">コンテンツ内容</p>
<p class="standard">
<ul id="resultList">
<li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li>
<li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li>
<li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li>
<li><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li>
<li class="mustright"><a href="images/001.jpg" class="thickbox" rel="ResultSample" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110px" height="100px" border="none"/></a></li>
</ul>
</p>
</div>
<div style="clear:both; "></div>
<div id="rightbox-buttom"><img src="images/rightbox-buttom.jpg" alt="枠">←背景にコンテンツの外枠となる画像の下部表示用
</div>
</div>
</div>
●CSS
#rightmenu {
width:645px;
float:right;
padding-top:20px;
background:url(../images/rightbox-top.png) no-repeat;
}
#rightbox-inside {
background:url(../images/rightbox-inside.png) repeat-y;
}
#resultList {
overflow:hidden;
margin:0 25px 0 30px;
padding:0;
list-style-type:none;
}
#resultList li {
display:inline;
float:left;
margin:0;
padding-right:10px;
}
#resultList li.mustright {
float:right;
padding-right:none;
}
#resultList li a {
display:block;
}
#resultList li a img {
display:block;
width:110px;
height:100px;
border:0;
}
#rightbox-buttom {
clear:both;
}
No.1ベストアンサー
- 回答日時:
floatを指定している要素にはwidthもあわせて指定したほうが安全です。
つまり、#resultList li なら120px、#resultList li.mustrightなら110px でしょうか。
あと、各画像と余白の横幅合計が645pxになり、入れ物の幅(#rightmenu)と同じってのも危険です。
3ピクセルくらい余裕を持たせたほうが安全です。
ありがとうございます。
下記のようにCSSを記述したらうまくいきました。
#resultList {
overflow:hidden;
margin:0 25px 0 30px;
padding:0;
list-style-type:none;
}
#resultList li {
float:left;
display:inline;
width:120px;
text-align:center;
}
#resultList li.mustright {
float:right;
width:110px;
padding-right:none;
}
#resultList li a {
display:block;
}
#resultList li a img {
border:none;
}
No.2
- 回答日時:
リストに関してブラウザによってmarginやpaddingのとり方に差があります。
これをリセットする必要があります。またHTMLに根本的な間違いがあるためブラウザによってはとんでもないものになるでしょう。段落要素内(p-paragraph)には、ブロック要素は含むことができません。!!
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
9.3.1 段落: P要素
<!ELEMENT P - O (%inline;)* -- paragraph -->
「要素Pは終了タグは省略できる。中には(%inline)行内要素のみもつ、段落(paragraph)を示す」と読みます。
a要素のrel(リンク形式)属性にResultSampleはありません。
rel=(Alternate|Stylesheet\Start|Next|Prev|Contents|Index|Glossary|Copyright|Chapter|Section|Subsection|Appendix|Help|Bookmark)
独自のものを使うときは、
【引用】____________ここから
HTML文書の著者は、本仕様に定義のない 追加のリンク形式を定義したい場合もあろう。 この場合は、リンク形式を定義するために用いた規約を引用するプロファイルを用意しなければならない。 詳しくはHEAD要素の profile属性に関する項を参照のこと。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Basic HTML data types (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
リンク終端でないidや、不適切な属性を削除して書き直すと
注意)視認性のためタブインデントは全角スペースに置き換えてある。
HTML]
★img要素のwidth属性はピクセル表記なので単位はつけてはならない
★img要素のborder属性はスタイルシートで指定すべき(非推奨属性)
★img要素のclass="thickbox"は子孫セレクタで特定できるので不要
★img要素のrel要素にResultSampleはない。(説明済み)
★内容ではない背景画像はスタイルシートで設定すべき
★アンカーターゲットになりえないidは使わない
☆HTML5,XHTML5への変更を考慮してマークアップを変更した。
HTML4<div class="section">→HTML5<section>
HTML4<div class="hgroup">→HTML5<hgroup>・・HTML5では同じsectionに複数のh1-6はもてない
HTML4<div class="article">→HTML5<article>
☆周囲の画像は、上下左右を囲んだものを左上と右下に固定配置するか
右と上を一組として┏形の画像をdiv.articleに、┛型の画像をdiv.article ulに対して設定する
それにより、デザインのためだけの不要な要素をHTML内に書かなくてすむ。
<div class="section" id="main">
<div class="section">
<div class="hgroup">
<h1>タイトル</h1>
<h2>コンテンツ内容</h2>
</div>
<div class="article">
<ul>
<li><a href="images/001.jpg" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110" height="100"/></a></li>
<li><a href="images/001.jpg" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110" height="100"/></a></li>
<li><a href="images/001.jpg" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110" height="100"/></a></li>
<li><a href="images/001.jpg" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110" height="100"/></a></li>
<li><a href="images/001.jpg" title="タイトル文"><img src="images/result-sample_01.jpg" alt="タイトル文" width="110" height="100"/></a></li>
</ul>
</div>
</div>
</div>
[CSS]
div#main{
width:675px;
padding-top:20px;
border:solid 1px gray;
text-align:center;
}
div#main div.article{
background:url(./images/background.gif) top left no-repeat rgb(200,200,200);
margin:0px 25px 30px 30px;
padding:2px 0px 0px 2px;
}
div#main ul{
display:block;
background:url(./images/background.gif) 100% 100%;
margin:0;
padding:0;
}
div#main ul li{
display:inline;
width:110px;
text-align:center;
margin:0 3px;
}
div#main ul li a img{border:none;}
非常に丁寧な回答ありがとうございます。
CSS初心者の私には??というところもありましたが、今後いろいろ調べて理解していけるようにしたいと思います。rel要素に関しては恥ずかしくて顔から火がでそうです。
質問の本題ですが下記のようにCSSを記述したらうまくいきました。
#resultList {
overflow:hidden;
margin:0 25px 0 30px;
padding:0;
list-style-type:none;
}
#resultList li {
float:left;
display:inline;
width:120px;
text-align:center;
}
#resultList li.mustright {
float:right;
width:110px;
padding-right:none;
}
#resultList li a {
display:block;
}
#resultList li a img {
border:none;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSS、width100%でもできる余白
-
z-indexで上になっている要素だ...
-
form input テキストを上下中央...
-
CSSでborderの長さを指定、また...
-
WEBサイト作成:初心者です...
-
CSSがなぜかfont-sizeだけ効か...
-
FC2ショッピングカート 写真の...
-
borderをページの下まで伸ばしたい
-
CSSで背景画像を一番下にもって...
-
ページを拡大縮小でborderが消...
-
li 黒丸含んで移動する方法
-
CSSで指定した背景画像にリンク...
-
divで囲まれたpaddingの指定を...
-
widthやheightの数値に単位(px...
-
テキストボックスの高さを可変...
-
<div>と<div>の間の10px程の...
-
【HTML】【CSS】【Swiper】 元...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報