Icefox の回答履歴
- mozillaにおける<div>で囲んだリストの配置について
スタイルシートを利用してウェブページを作成しようとしているのですが、mozillaでのリストの配置が上手く行きません(IEでは出来ました)。 <div id="one"> <div id="two"> <ul> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </div> </div> というように、二つの<div>で<ul>を囲んでいます。 この時、リストを右側に配置しようとして、 #one{ width: 500px; } #two{ width: 200px; float: right; } とすると、mozillaで表示する時に、oneの中に、two(とtwoに囲まれた<ul>)が入ってくれません。 two(とtwoに囲まれた<ul>)はfloatで指定した通り右側に来ますが、oneの下に表示されるのです。 2つの<div>で<ul>囲むとこのような事が起こります。 oneの中にtwoで囲まれたリストを表示したいのですが、どのようにスタイルシートで指定すれば良いのか分かりません。 何か良い方法はないでしょうか。 どうぞよろしくお願い致します。
- floatを使った時のブラウザでの違い
ブログにてfloatを使い、下記のように表示させたいのですが、 IE7では思い通りに表示できるものの、Firefox2.0ではうまく表示できず困っています。 本来、 日付 タイトル カテゴリ -------------------- 日付 タイトル カテゴリ -------------------- このようにしたいのですが、Firefoxで確認すると、 日付 タイトル カテゴリ -------------------- 日付 タイトル カテゴリ -------------------- 日付 タイトル カテゴリ -------------------- と、最新エントリーのタイトル(class="right")と、 区切り線(class="end")の間だけがかなり空いてしまいます。 これはブラウザのバグなのでしょうか。それともスタイルシートの記述が 間違っているのでしょうか。よろしくお願いします。 なお、タグとcssは以下のように書いています。 【タグ】 <div class="left"> 日付<br /> カテゴリー</div> <div class="right">タイトル</div> <div class="end"></div> 【css】 div.left {float: left;width: 100px;} div.right { } div.end {clear: both; border-bottom: 1px dotted #000000;}