使用ul li制作菜單導航，設置li水平居中顯示

要點：去掉LI的float：left的屬性。

 

li的float:left方法顯然有一個問題，就是無法居中（水平），只能使用padding-left或margin-right的方法方法來固定其居中。

一直以為對ul li居中對齊已經掌握了。但最近做項目時發現之前li的float:left方法顯然有一個問題，就是無法居中（水平），只能使用padding-left或margin-right的方法方法來固定其居中。但這樣可能在寬屏與窄屏的顯示不一致。
使用這種方法主要是利用li的浮動固定寬度來實現，li的默認display為block，將其這個屬性改為inline便可實現這種ul li居中的問題

<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>