昨日、ucweb を使用している goos の投稿を目にしました。 Float メニューを水平方向に中央に配置できないと誰が言ったのでしょうか?ハック。
ここにはもっと簡単な方法があるので、それを最初に示します。
本当は別の div を外に置くべきだったのですが、二酸化炭素排出量を減らすために、それを破棄しました。
コードボックスを実行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{マージン:0;パディング:0;リストスタイル:なし;}
#navigation{display:inline-block;border:solid 1px red;padding:20px;}
#navigation li{高さ:30px;float:left;}
#navigation li a{float:left;height:30px;line-height:30px;padding:0 23px;background:#97C099;}
#navigation li a:hover{background:#59c099;color:#fff;}
</スタイル>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>フロート メニューが勝つための 1 つの方法</title>
</head>
<本文>
<ul id="ナビゲーション">
<li><a href="#">ホーム</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">ストア</a></li>
<li><a href="#">グループ</a></li>
<li><a href="#">コミュニティ</a></li>
<li><a href="#">ヘルプ</a></li>
</ul>
</body>
</html>
[Ctrl+A すべて選択 ヒント: 最初にコードの一部を変更してから実行を押すことができます]
最も重要なのは次の一文です。
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
IE の下位バージョンに対応するために、ここで条件付きコメントを使用しています。IE7 以下では、display:inline; の機能が inline-block; に相当するように感じます。
スライディング ドア ナビゲーションは、上記のコードから進化しました。
コードボックスを実行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{font-family:Verdana,Arial,sans-serif;font-size:12px;margin:120px auto;text-align:center;}
ul{マージン:0;パディング:0;リストスタイル:なし;}
#navigation{display:inline-block;padding:20px;border:solid 1px red;}
#navigation li{高さ:30px;float:left;}
#navigation li a{float:left;background:#97C099 url( ) right -352px no-repeat;padding-right:27px;line-height:33px;cursor:hand;}
#navigation li a:hover,#navigation li.current a{background-position:left -176px;color:#009;background-color:#8597B5;}
#navigation li a:ホバー スパン,#navigation li.current a スパン{background-position:right -528px;}
#navigation li.current a{font-weight:bold;}
</スタイル>
<!--[if lte IE 7]><style type="text/css">#navigation{display:inline;}</style><![endif]-->
<title>上記のコードに従って引き戸スタイルにアップグレードします</title>
</head>
<本文>
<ul id="ナビゲーション">
<li><a href="#"><span>ホーム</span></a></li>
<li><a href="#"><span>ニュース</span></a></li>
<li class="current"><a href="#"><span>ストア</span></a></li>
<li><a href="#"><span>グループ</span></a></li>
<li><a href="#"><span>コミュニティ</span></a></li>
<li><a href="#"><span>ヘルプ</span></a></li>
</ul>
</body>
</html>
[Ctrl+A すべて選択 ヒント: 最初にコードの一部を変更してから実行を押すことができます]
このうち、次の 2 つの文は、冗長とみなされるのを避けるために説明する必要があります。
#navigation li a{overflow:hidden;} /* IE5.5 および 6 でドロップされた 3px を非表示にします。これは 3px のバグではありません。 IE5.5と6ではheight:30px;line-height:33px;なので高さは33pxになります。 */
#navigation li a span{cursor:hand;}/* マウスをスパン上に置いたときに手の形が表示されないという IE 5.5、6、および 7 のバグに注意してください。さらに、IE5.5 はcursor:pointerをサポートしていませんが、IEのすべてのバージョンはcursor:hand;*/を認識します。
欠点は、xhtml 恐怖症の人にとって、その行の条件付きコメントを書くのは目に砂のようなものであるということです。これを解消したい場合は、ハックを使用しても問題はありません。ふふ！
safari4、chrome、opera10、ie5.5、5、6、7、ff3では問題ありません。