css ul li導航菜單居中問題解決方法
發(fā)布時間：2012-11-30 15:57:43 作者：佚名 
我要評論
我要評論不改變html結構，使導航菜單垂直水平居中這個問題應該如何解決呢？本文將詳細介紹，需要了解的朋友可以參考下
昨晚群里一個朋友幫忙解決的問題，之前沒有遇到過，題目如下：
不改變html結構，使導航菜單垂直水平居中，導航寬度自適應屏幕100%，高度30px;單項高度28px,寬80px;
兼容：ie6+,ff,chrome,opera等主流瀏覽器。
html:
Example Source Code
復制代碼
代碼如下:<ul id="nav">
<li><a href="#">home</li>
<li><a href="#">advice</li>
<li><a href="#">page</li>
<li><a href="#">people</li>
<li><a href="#">service</li>
</ul>
注意：html結構不能變，菜單寬高可定義！
復制代碼
代碼如下:<style type="text/css">
*{margin:0; padding:0;}
ul,li{list-style:none;}
.clear{clear:both;}
#nav{width:100%; white-space:nowrap; overflow:hidden; background:#ccc; position:relative; }
#nav li{ float:left; position:relative; left:50%; }
#nav .a1{margin-left:-240px;} #nav .a2{margin-left:-160px;} #nav .a3{margin-left:-80px;}
#nav li a{ display:block; text-align:center; line-height:28px; background:#ccc; color:#000; width:80px; height:28px;}
</style>
<ul id="nav">
<li class="a1"><a href="#">home</a></li>
<li class="a2"><a href="#">advice</a></li>
<li class="a3"><a href="#">page</a></li>
<li><a href="#">people</a></li>
<li><a href="#">service</a></li>
</ul>
相關文章
- 大家都知道，目前有很多瀏覽器無法實現(xiàn)背景裁切、背景透明度、背景變換和復雜背景定位等效果;那么這篇文章將詳細介紹了這幾種背景圖片的處理方法,需要了解的朋友可以參考下2012-12-24
- IE6下CSS背景圖片閃爍的Bug（ie6下的背景圖片緩存問題）2011-07-27
鏈接偽類（:hover）CSS背景圖片有閃動BUG的解決方法
IE6下鏈接偽類（:hover）CSS背景圖片有閃動BUG，主要原因ie會再一次請求這張圖片，或者說圖片沒被緩存。2011-04-28網(wǎng)頁CSS背景圖片使用的測試結果-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學網(wǎng)
這篇文章主要講了CSS對背景圖片渲染效率的一些經(jīng)驗和研究，在webjx.com中，還有著類似CSS效率的相關文章。 樹型結構豎線用樣式表（背景圖）來實現(xiàn)，樣式表背景2008-10-17- 利用一張背景圖片來實現(xiàn)菜單的懸停狀態(tài)，沒有什么不可思議完全可以辦得到，僅這一張圖片，我們實現(xiàn)一個橫行CSS菜單。并設置它們的懸停效果，感興趣的朋友可以參考下哈，希2013-03-28
純css實現(xiàn)的六邊形(蜂窩)導航效果(支持hover/兼容瀏覽器)
在之前的文章中曾經(jīng)寫到過一篇“三角形變形記之純css實現(xiàn)的分布導航條效果”，其中用到了邊框實現(xiàn)三角形的效果。最近又折騰了一個六邊形的蜂窩效果給大家蹂躪。主要用到了2013-02-057款設計巧妙的css3飄帶狀3D立體效果的導航菜單和表單窗口
接下來向大家推薦7款設計巧妙的CSS3飄帶狀菜單和窗口，相當不錯的效果，很多都具有3D立體效果，看了相信你一定會喜歡的好了不多說，切入主題，希望本文可以幫助到你，提高2013-02-04不規(guī)則背景墻 CSS實現(xiàn)背景圖片不規(guī)則的導航菜單
一般情況下導航菜單的背景圖片都是比較有規(guī)則的，但是平時我們也會遇到很多背景圖片形狀不規(guī)則導航條比如但鼠標移上的時候，背景圖片不規(guī)則，本例只討論此種類型2013-01-02- W3cplus第二版本剛上線時，好多位朋友向我問起站上的分頁導航樣式是怎么制作;為了報答各位朋友一持對本站的大力支持，今天我特意把這個分頁導航的效果當作一個小教程來說。2012-12-24
- 要做一個Bubble氣泡提示框，如果用CSS3特性來做很容易，用圖片來做也可以，但前者有兼容性問題，后者又不夠靈活，用圖片做有一個例子可以看看jquery打造一款側邊彈出的垂直2011-11-23