CSS中ul li置中的問題

一直以為對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>
 

顯示效果：點擊此處預覽

注意其中 ul最好要加margin:0;padding:0;，主要是為了相容各瀏覽器。