導覽列置中對齊範例程式碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div+css做導覽列置中對齊樣本</title></head><style> body { text-align:center; /* 文字置中 */ } ul { list-style-type:none; /* ul前面的點 */ } * { margin:0px 0px; /* 到邊框的距離 */ } .menu { background: #029789; /* 導航條背景的顏色 */ } .nav { margin:0 auto; /* 導覽列文字的位置 */ width:800px; /* 和文字寬度有關，不能小於文字寬度的總和 */ height:80px; /* 導覽列的寬度 */ } .nav a { float:left; /* 導覽列的位置配置 */ width:140px; /* 選中的文字塊的長度 */ line-height:80px; /* 選中的文字塊的寬度 */ text-decoration: none; /* 去掉串連底線 */ font-size:45px; /* 字型大小 */ color: #FFFFFF; /* 字型顏色 */ } .nav li a:hover { background-color: #1094f2; /* 選中的文字塊的顏色 */ text-decoration:none; /* 選中時去掉串連底線 */ } .nav li a:link{ text-decoration:none; /* 串連被點之後沒有底線 */ }</style><body><div class="menu"> <!-- class選取器 --> <div class="nav"> <ul> <!-- ul標籤 --> <li><a href="#">導航1</a></li> <!-- li標籤 --> <li><a href="#">導航2</a></li> <li><a href="#">導航3</a></li> <li><a href="#">導航4</a></li> <li><a href="#">導航5</a></li> </ul> </div></div></body></html>
此段代碼可直接複製在本地測試，網頁上顯示如：
相關標籤屬性介紹：
text-decoration 屬性規定添加到文本的修飾。所屬可能值和描述如
【相關文章推薦】
CSS中五種方法實現導覽功能表水平置中的執行個體詳解
怎樣用DIV和CSS做導航條
div+css製作一級導航
怎樣使用CSS讓DIV置中顯示
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
