<li>タグの隙間が消えない

質問

cssでhtmlのレイアウトを調整し、float:left;で<li>タグを水平方向に並べています。
この時、「見た目では隙間は埋まっている」のですが、onmouseoutの処理を記述している場合、どうしても<li>タグの間に見えない隙間が生じて、そこにマウスカーソルを合わせるとonmouseoutの処理が走ってしまいます。
この見えない隙間は埋められるのでしょうか？　詳しい方、よろしくお願いします。

回答No.2

taka451213 · ベストアンサー

こんばんは。

補足ありがとうございます。
これは<li>の隙間の問題ではないですね・・・。

「あいうえお」から「かきくけこ」に移動すると、
「あいうえお」のonmouseoutイベントは発生します。
なので、マウスカーソルが<li>を移動すると、メッセージが表示されます。
IE8とFirefoxでテストしましたが、普通の動作です・・・。

お礼

解答ありがとうございます。

どうやら頭がおかしくなっていたようです。お手数かけまして申し訳ございません。なぜ悩んでいたのか謎です。頭を冷やしてきます。

回答No.1

taka451213

こんばんは。

＞どうしても<li>タグの間に見えない隙間が生じて
現状はどのような記述になっていますか？
HTMLとCSS・・・。

補足

taka451213様。

書き込みありがとうございます。ソースはこんな感じです(わかりやすいように単純化してあります)。ブラウザはGoogleChromeの9です。

css部分↓

ul {position:absolute; top:50px; left:50px; width:600px; height:50px; border:1px; line-style-type:none; padding:0px; border:1px;}

li {float:left; margin:0px; background-color:black; color:white; width:200px; height:50px; text-align:center; line-height:50px; font-size:25px;}
}

html部分↓
<ul>
<li style="background-color:blue;" onmouseout="javascript:alert('テスト')"><a>あいうえお</a>
<li style="background-color:green;" onmouseout="javascript:alert('テスト')"><a>かきくけこ</a>
<li style="background-color:red;" onmouseout="javascript:alert('テスト')"><a>さしすせそ</a>
</ul>

これで、<li>間でonmouseoutの処理が起きないようにしたいのですが、どうしても起きてしまいます……。