aタグ ブロック表示の回り込み【display: block;とfloat】

立て続けにCSSのメモをしてますが、最後に。

<ul>
<li><a href=”/”>a</a></li>
<li><a href=”/”>b</a></li>
<li><a href=”/”>c</a></li>
</ul>

なんて、メニューを横並びにa要素をブロック表示にして、floatで
回り込みさせるやり方で、これまたIE6の対応のために。

aタグに幅や高さを指定してfloatさせるんですが、aタグのCSSに
floatを指定するとIE6では階段状のように段々に下にずれていく。

解決策としては、aタグにdisplay: blockと幅高さ指定し、
liタグにfloatを指定する。こうすればIE6でもだいじょうぶ。

追記:

失礼しました。<ul><li>のみの現象でした。普通にaタグだけのソースなら
aタグにfloat CSSしても段々にずれることなくだいじょうぶでした。

<a href=”/”>a</a>
<a href=”/”>b</a>
<a href=”/”>c</a>

このエントリーをはてなブックマークに追加
はてなブックマーク - aタグ ブロック表示の回り込み【display: block;とfloat】
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
管理人おすすめのレンタルサーバーまとめました

はてなブックマークに追加

コメントは停止中です。

MySQL無制限100GB ドメイン最安 X2レンタルサーバー

エックスツー

WordPress無制限も実現できるMySQL無制限の高速レンタルサーバー。

容量100GBの余裕のスペースにマルチドメインも無制限。密かに人気なのが、契約していれば.netなどドメインが850円と最安値で、別サーバーへのドメイン利用も可能。

PHPやCGIを高速にするXキャッシュ機能も搭載している X2レンタルサーバー