<ul><li>で画像が均等配置せずレイアウト崩れ

質問

<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

hok212 · ベストアンサー

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

ORUKA1951

リストに関してブラウザによってmarginやpaddingのとり方に差があります。これをリセットする必要があります。
　またHTMLに根本的な間違いがあるためブラウザによってはとんでもないものになるでしょう。段落要素内(p-paragraph)には、ブロック要素は含むことができません。!!
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/text.html#edef-P
　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-html401j/types.html#type-links )］より

　リンク終端でない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;
}