ie6 でリストが横に並ばず縦に並んでしまう

質問

ie6のコーディングでノイローゼになりそうです。5時間くらいいろいろ試行錯誤しましたが、解決できません。

<div class="pic0">
<ul>
<li class="pic1"><img src="images/pic1.jpg"/></li>
<li class="pic1"><img src="images/pic2.jpg" /></li>
<li class="pic1"><img src="images/pic3.jpg" /></li>
<li class="pic1"><img src="images/pic4.jpg"/></li>
<li class="pic1"><img src="images/pic5.jpg"/></li>
</ul></div>

.pic0{
width: 250px;
height:40px;
float: left;
display:inline;
padding-top: 10px;
padding-bottom: 10px;
overflow:hidden;

}

.pic1 li {
float: left;
height: 47px;
width: 36px;
display:block;
margin-left:3px;
margin-right:3px;

}

ie6のみ縦に並んでしまいます。

疑ったもの

・haslayout

*{
zoom:1; }
{line-height:0;}

・marginが倍になるバグ　widthの指定
・cssが効いていない
・ ネガティブマージン

など

ie6のcssを読み込ませるなど、何でもいいので、ie6のリストが横にさせる方法はないでしょうか。

雑文ですが、どうかお願いします。助けてください。

回答No.1

ORUKA1951 · ベストアンサー

定番
<div class="nav">
<ul>
<li><a href=""><img src="images/01.jpg" width="47" height="36" alt="abc"></a></li>
<li><a href=""><img src="images/02.jpg" width="47" height="36" alt="def"></a></li>
<li><a href=""><img src="images/03.jpg" width="47" height="36" alt="ghi"></a></li>
<li><a href=""><img src="images/04.jpg" width="47" height="36" alt="jkl"></a></li>
<li><a href=""><img src="images/05.jpg" width="47" height="36" alt="mno"></a></li>
</ul>
</div>

だとして
div.nav{width:300px;margin:0 auto;}
div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;}
div.nav ul li{width:47px;height:36px;float:left;margin:0 5px;position:relative;}
div.nav ul li a,div.nav ul li a img{display:block;height:100%;width:100%;}
div.nav ul li a img{border:none;}

お礼

ありがとうございます。できました！

回答No.2

Questa

.pic1 li { → .pic1 {