リストタグを用いた段組みメニューの不具合（IE6）

解決済

質問者：gspopo
質問日時：2011/07/01 11:05
回答数：3件

数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。
リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、
IE6で確認した際にdisplay:inlineを使用しているにも関わらずリストが縦に並んでしまいます。
他のブラウザで見る際には問題が無いので、どうしたものかなと途方にくれています。

以下がhtmlとcssです。

【html】
<div class="test">

<div class="test_left">
<h3>テスト1</h3>
<ul>
<li><a href="#">・あ</a></li>
<li><a href="#">・い</a></li>
<li><a href="#">・う</a></li>
</ul>
</div>

<div class="test_right">
<h3>テスト2</h3>
<ul>
<li><a href="#">・あ</a></li>
<li><a href="#">・い</a></li>
<li><a href="#">・う</a></li>
</ul>
</div>

<div class="search_clear"></div>

<div class="test_left">
<h3>テスト1</h3>
<ul>
<li><a href="#">・あ</a></li>
<li><a href="#">・い</a></li>
<li><a href="#">・う</a></li>
</ul>
</div>

<div class="test_right">
<h3>テスト2</h3>
<ul>
<li><a href="#">・あ</a></li>
<li><a href="#">・い</a></li>
<li><a href="#">・う</a></li>
</ul>
</div>

</div>

【css】
div.test {
width: 500px;
height: 370px;
margin: 15px 0 10px 0;
}

div.test h3 {
width: 220px;
font-size: 16px;
margin: 10px 10px 0 20px;
}

div.test ul {
width: 220px;
margin: 0 10px 15px 10px;
list-style:none;
}

div.test ul li {
width: 220px;
display:inline;
}

div.test ul li a {
color: #666;
}

div.test ul li a:hover {
color: #999;
}

.test_clear {
clear:both;
}

.test_left {
float: left;
width: 240px;
}

.test_right {
float: right;
width: 240px;
}

仮にこの部分に問題が無いとすると、この要素を囲む他のcssやhtmlに問題あるのかもしれませんが、
何卒宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： hinananana
回答日時：2011/07/01 14:23

No.1さんと言うとおり

div.test ul li {
width: 220px;
display:inline;
}

width:220px;は必要ありません。

liのwidthが220pxで
ulのwidthも220pxなら収まりませんよね。

表示がおかしい時に

div.test ul li {
width: 220px;
display:inline;
border:solid 1px;
}

ボーダーを入れて見た方が何が問題なのかわかりやすくなります。