您现在的位置: 365建站网 > 365学习 > CSS中ul li居中的问题

CSS中ul li居中的问题

文章来源:365jz.com     点击数:4560    更新时间:2009-09-14 10:34   参与评论

一直以为对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;,主要是为了兼容各浏览器。

Tag标签: css

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (4560人查看2条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------