画像を横並びにできなくて困っています：CSSの設定

質問

現在こちらのサイトの管理をしています。
↓
http://heiz.jp/
カテゴリを２つほど増やそうと、画像を作り替え、横幅を設定しなおしてアップしたら、
現在のように、画像と画像の間に幅ができ、ひとつ画像がずれて表示されてしまいました。
CSSの設定が悪いのかと思うのですが、CSS初心者のため、どこが悪いのか解りません。
↓
http://heiz.jp/styles-site.css

ちなみに、カテゴリー部分のスタイルシートはこんな感じです。
↓
/* ----- カテゴリー一覧 ----- */

div.category-archives
{
font-size:90%;
margin:0 0 0 0;
}

div.category-archives img
{
border:0;
}

div.category-archives ul
{
list-style:none;
margin:0;
line-height:100%;
float:left;
}

div.category-archives ul li
{
display:inline;
line-height:100%;
margin:0;
padding:0;
float:left;
text-align:center;
}

div.category-archives ul li a
{
display:block;
width: 99px;
height: 38px;
padding:9px 0 0 0;
background:#ffffff url(images/h_menu_0.jpg) no-repeat 0 0;
color:#292929;
font-weight:bold;
line-height:100%;
margin:0;
}

div.category-archives ul li a:hover
{
display:block;
width: 99px;
height: 38px;
padding:9px 0 0 0;
background:#ffffff url(images/h_menu_1.jpg) no-repeat 0 0;
text-decoration:none;
color:#0072C2;
font-weight:bold;
line-height:100%;
margin:0;
}

どこを修正したら、ちゃんと横並びに表示されるのか、
どなたか教えてください！助けてください！！

回答No.1

t_ohta · ベストアンサー

ａタグ同士の間に改行を入れないようにしたら直りませんか？

<a href="" ....><img src=""></a>
<a href="" ....><img src=""></a>
<a href="" ....><img src=""></a>

となっているのを

<a href="" ....><img src=""></a><a href="" ....><img src=""></a><a href="" ....><img src=""></a>

とする。

お礼

改行をなくしたら、なおりました！！
ありがとうございます！！！

すでに公開してしまっていてあせっていたので、
本当に助かりました。。。！！！

すばやいご回答、本当に感謝です！！

あとはちょっと画像のぐあいがおかしいのですが、、、、
なんとか自力でなおします！！

回答No.2

CyberCypher

表示するスペースの横幅足りてないんじゃないですか？
div.category-archivesは未指定なのでその親div.containerのwidthで強制されて改行されてます
画像を小さくするか、widthをもう少し広げてあげては？