昨晚群里一個朋友幫忙解決的問題，之前沒有遇到過，題目如下：

不改變html結構，使導航菜單垂直水平居中，導航寬度自適應屏幕100%，高度30px;單項高度28px,寬80px;

兼容：ie6+,ff,chrome,opera等主流瀏覽器。

html:

Example Source Code

復制代碼代碼如下:

• home
• advice
• page
• people
• service

注意：html結構不能變，菜單寬高可定義！

復制代碼代碼如下:

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。