昨晚群里一個(gè)朋友幫忙解決的問(wèn)題，之前沒(méi)有遇到過(guò)，題目如下：

不改變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ù)制代碼代碼如下:

• home
• advice
• page
• people
• service

注意：html結(jié)構(gòu)不能變，菜單寬高可定義！

復(fù)制代碼代碼如下:

*{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;}

• home
• advice
• page
• people
• service

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的html让ul的li自动居中,css ul li导航菜单居中问题解决方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。