【最大10000ポイント】当たる!!質問投稿キャンペーン!

数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。
リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、
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に問題あるのかもしれませんが、
何卒宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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;
}

ボーダーを入れて見た方が何が問題なのかわかりやすくなります。
    • good
    • 0
この回答へのお礼

その通りでした。
問題を分かりやすくする方法もご教授下さり感謝しています!

素早いご回答本当に有難う御座いました!

お礼日時:2011/07/01 15:31

<!--[if lte IE 6]>IE6では表示が乱れる可能性があります。

<![endif]-->
と、書いてIE6を無視する。ワタシはIE6が無いので無視してます。
あるいは、
<!--[if lte IE 6]>ここにie6用のcssを書く<![endif]-->
    • good
    • 0
この回答へのお礼

ハックは使用していたのですが上手く行かなかったのです。
素早いご回答有難う御座いました!

お礼日時:2011/07/01 15:31

div.test ul li {


width: 220px; ←これがいらなくないですか?
display:inline;
}
    • good
    • 0
この回答へのお礼

その通りでした。
素早いご回答本当に有難う御座いました!

お礼日時:2011/07/01 15:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング