DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> Float菜單水平居中簡單方法
Float菜單水平居中簡單方法
編輯:CSS詳解     

昨天用ucweb看到了goos發的一篇帖子:誰說Float菜單不可以水平居中,進去看了看,覺得方法有點繁瑣了,用到了負邊距,position:relativel; 和很少的一點hack。

我這裡還有更簡單的辦法,先展示:
其實我外面應該再套一個div,但為了減少碳排放,捨棄。

運行代碼框

 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

其中最為關鍵的是這一句:

<!--[if lte IE 7]><style type="text/CSS">#navigation{display:inline;}</style><![endif]-->

為了照顧較低版本IE,這裡使用了條件注釋,感覺在IE7以下中,display:inline;的作用就相當於inline-block;。

根據上面代碼進化而來的滑動門導航:

運行代碼框

 [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

其中,這兩句有必要說明一下,以免被認為是多余的:

#navigation li a{overflow:hidden;} /* 隱藏掉IE5.5、6多掉的那3px,不是3px bug哈!因為height:30px;line-height:33px; 在IE5.5、6中高度就是33px了。  */
#navigation li a span{cursor:hand;}/* 照顧IE 5.5、6、7鼠標放在span上面不呈手型的bug。此外,IE5.5不支持cursor:pointer;但IE全版本都認識cursor:hand;*/

完工了,缺點就是,寫那一行條件注釋,對於有xHtml潔癖的人來說,就像眼裡的沙子,想除掉,那就使用hack也無妨!呵呵!

在safari4,chorme,Opera10,IE5.5、5、6、7,ff3中均暫未發現問題。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved