リストで間が開いてしまう・・・

質問

xhtml&cssでサイト作成を行っているのですが、
リストをインラインでならべて、
list-style-type: none;
でリストの黒丸を消して、
そこに画像を入れてならべようと思ったのですが、
画像と画像の間に隙間が開いてしまいます。

ソースはこちらです。
---XHTML-------------------------
<div id="@">

<ul>

<li>
<img src="@" />
</li>

<li>
<img src="@" />
</li>

<li>
<img src="@" />
</li>

</ul>

</div>
----XHTML----------------------------------

----CSS------------------------------------
div#@@@@ ul{
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
}

div#@@@@ li{
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
}
----CSS------------------------------------

念のために、ulとliの両方を指定しておきました。
(通常は、liだけでよいです。）

このとおりになるのですが、
これで、隙間をなくす方法を知っていたら教えてください！
お願いします！

回答No.3

cyokokichi

素朴な疑問ですが、ul、liにdisplay: inline;を入れていると言うことは、横に並べたいのですよね？
なぜ、そのままならべないのでしょう。
HTMLの中で、改行せずに<img src="@" />を並べればくっつくと思うのですが、気のせいですか？
このソースもなまじul、liを入れて改行しているから離れるのでは？
<ul>
<li><img src="@" /></li><li><img src="@" /></li><li><img src="@" /></li>
</ul>
このように書けば隙間がなくなりませんか？

回答No.2

partita

imgに
vertical-align:bottom;

回答No.1

tsuna555

list-style-imageを使用すればよいのでは？

参考URL：

http://hp.vector.co.jp/authors/VA013937/cssref/listimag.html