CSS中ulli居中的问题
⼀直以为对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">
div中的div居中
<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;，主要是为了兼容各浏览器。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。