数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。
リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、
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に問題あるのかもしれませんが、
何卒宜しくお願い致します。
No.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;
}
ボーダーを入れて見た方が何が問題なのかわかりやすくなります。
No.2
- 回答日時:
<!--[if lte IE 6]>IE6では表示が乱れる可能性があります。
<![endif]-->と、書いてIE6を無視する。ワタシはIE6が無いので無視してます。
あるいは、
<!--[if lte IE 6]>ここにie6用のcssを書く<![endif]-->
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
番号付きリスト(<Ol><Li>・・...
-
ボタンを横に並べて表示させる方法
-
リンク文字同士の間隔を開ける...
-
htmlで行頭を下げる方法
-
透明のボックスにリンクを貼りたい
-
liタグの中に<p>タグやら<dl>を...
-
css ol liにdisplay:inlineを設...
-
ulとliで囲った文字の一部を変...
-
リストの数字のフォントサイズ...
-
jQuery-もっと見るボタンをスマ...
-
bxsliderの画像が左によってしまう
-
html/cssの、navを2段にする...
-
<ul><li></li></ul>にするメリ...
-
CSS「table-cell」で横並びにし...
-
Dreamweaverで、ul要素の下に写...
-
リストタグを用いた段組みメニ...
-
記事の最後の次のページ、前の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
html <li>の中の文字一部に色を...
-
CSS質問:大手サイトを見ると何...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報