CSS成长之路----知识点篇
Posted GOFighting
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 }
效果图：
以上是关于CSS成长之路----知识点篇的主要内容，如果未能解决你的问题，请参考以下文章