昨日、UCWEBを使用したGoosの投稿を見ました。フロートメニューは水平に中央に配置できないと言いました。そして少しハック。
ここには簡単な方法があります。最初に示します。
実際、私は外に別の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">
<head>
<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 {height：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：#ffff;}
</style>
<！ - [if lte ie 7]> <style type = "text/css"> ＃navigation {display：inline;} </style> <！[endif] - >
<title> 1つの方法でメニュールームをフロート</title>
</head>
<body>
<ul id = "navigation">
<li> <a href = "＃"> home </a> </li>
<li> <a href = "＃"> news </a> </li>
<li> <a href = "＃"> store </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では、インラインの関数に相当します。
上記のコードから進化したスライドドアナビゲーション：
コードボックスを実行します
<！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">
<head>
<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 {height：30px; float：left;}
#navigation li a {float：left; background：＃97c099 url（<a href = "）left top top no-repeat; padding-left：27px; height：30px; overflow：hidden;}
#navigation li a span {height：30px; float：left; background：url（<a href = "）right -352px no-repeat; padding-right：27px; line-height：33px; cursor：hand;}
#Navigation Li A：Hover、＃Navigation Li.Current A {background-position：左-176px; color：＃009; background-color：＃8597b5;}
#Navigation Li A：Hover Span、＃Navigation Li.Current a Span {background -position：right -528px;}
#navigation li.current a {font-weight：bold;}
</style>
<！ - [if lte ie 7]> <style type = "text/css"> ＃navigation {display：inline;} </style> <！[endif] - >
<title>上記のコードに従ってスライディングドアスタイルの更新</title>
</head>
<body>
<ul id = "navigation">
<li> <a href = "＃"> <span> home </span> </a> </li>
<li> <a href = "＃"> <span>ニュース</span> </a> </li>
<li class = "current"> <a href = "＃"> <span> store </span> </a> </li>
<li> <a href = "＃"> <span>グループ</span> </a> </li>
<li> <a href = "＃"> <span>コミュニティ</span> </a> </li>
<li> <a href = "＃"> <span> help </span> </a> </li>
</ul>
</body>
</html>
[ctrl+aすべての選択のヒント：最初にコードを変更してから実行することができます]
その中で、冗長と見なされないように、これら2つの文章を説明する必要があります。
#navigation li a {overflow：hidden;} /* 3pxのバグではない3pxを追加します。高さ：30px; Line-Height：33px; */
#navigation li a span {cursor：hand;}/*スパンのマウスが手形のように見えないバグに注意してください。さらに、IE5.5はカーソルをサポートしていません。
完了後、条件付きコメントのラインを書くことは、XHTMLの罹患率を持っている人のためにあなたの目の砂のようなものです。 hehe！
Safari4、Chorme、Opera10、IE5.5、5、6、7、FF3で問題は見つかりませんでした。