这种方法主要是利用li的浮动固定宽度来实现,li的默认display为block,将其这个属性改为inline便可实现这种ul li居中的问题。
[cce_html] <style type="text/css"> #bNav{ margin-top:10px; background:#D9EBF5; text-align:center; } #bNav ul{ padding:4px 0; margin:0; overflow:hidden; } #bNav ul li{ display:inline; padding:0; } </style> <div id="bNav" class="bNav"> <ul> <li><a href="index.aspx" title="Home">Home</a></li> <li>|</li> <li><a href="info.aspx?info_id=8" title="About Us">About Us</a></li> <li>|</li> <li><a href="info.aspx?info_id=9" title="Department Design">Department Design</a></li> <li>|</li> <li><a href="info.aspx?info_id=10" title="Law Declaration">Law Declaration</a></li> <li>|</li> <li><a href="info.aspx?info_id=11" title="Contact Us">Contact Us</a></li> <li>|</li> <li><a href="info.aspx?info_id=12" title="Application Agent">Application Agent</a></li> <li>|</li> <li><a href="info.aspx?info_id=13" title="Job Services">Job Services</a></li> <li>|</li> <li><a href="info.aspx?info_id=14" title="Apply Link">Apply Link</a></li> </ul> </div> [/cce_html] 注意其中 ul最好要加margin:0;padding:0;,主要是为了兼容各浏览器。