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 }

　　效果图：