みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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だけでよいです。)

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

投稿日時 - 2005-12-15 23:25:08

QNo.1841551

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

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

投稿日時 - 2005-12-16 20:12:35

ANo.2

imgに
vertical-align:bottom;

投稿日時 - 2005-12-16 12:27:36

ANo.1

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

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

投稿日時 - 2005-12-16 08:50:04

あなたにオススメの質問