當前位置：
首頁 >
CSS成长之路----知识点篇
發布時間：2025/4/5
41
豆豆
生活随笔
收集整理的這篇文章主要介紹了
CSS成长之路----知识点篇
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一，ul--li列表水平排列，切居中對齊
主要是利用Li標簽中的display屬性。設置為display:inline，使li縱向排布，且能夠使用text-align:center;使其居中顯示
HTML結構：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>練習</title> 6 </head> 7 <body> 8 <div id="bNav" class="bNav"> 9 <ul> 10 <li><a href="index.aspx" title="Home">Home</a></li> 11 <li>|</li> 12 <li><a href="info.aspx?info_id=8" title="About Us">About Us</a></li> 13 <li>|</li> 14 <li><a href="info.aspx?info_id=9" title="Department Design">Department Design</a></li> 15 <li>|</li> 16 <li><a href="info.aspx?info_id=10" title="Law Declaration">Law Declaration</a></li> 17 <li>|</li> 18 <li><a href="info.aspx?info_id=11" title="Contact Us">Contact Us</a></li> 19 <li>|</li> 20 <li><a href="info.aspx?info_id=12" title="Application Agent">Application Agent</a></li> 21 <li>|</li> 22 <li><a href="info.aspx?info_id=13" title="Job Services">Job Services</a></li> 23 <li>|</li> 24 <li><a href="info.aspx?info_id=14" title="Apply Link">Apply Link</a></li> 25 </ul> 26 </div> 27 </body> 28 </html>?
CSS代碼：
1 #bNav{ 2 margin-top:10px; 3 background:#D9EBF5; 4 text-align:center; 5 } 6 #bNav ul{ 7 padding:4px 0; 8 margin:0; 9 overflow:hidden; 10 } 11 #bNav ul li{ 12 display:inline; 13 padding:0; 14 }效果圖：
?
轉載于:https://www.cnblogs.com/zhengfengyun/p/5563743.html
總結
以上是生活随笔為你收集整理的CSS成长之路----知识点篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 语音增强原理之噪声估计
- 下一篇： CSS3-实现单选框radio的小动画