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