实现ul中的li居中的多种方式及其利弊

  1. <div class="Box"> 
  2. <ul> 
  3. <li>我是居中</li> 
  4. <li>我是居中</li> 
  5. <li>我是居中</li> 
  6. <li>我是居中</li> 
  7. <li>我是居中</li> 
  8. <li>我是居中</li> 
  9. <li>我是居中</li> 
  10. </ul> 
  11. </div> 

1.关键词:margin or padding

这种方式居中很纠结,适应能力差,margin大小和padding大小都必须跟网页大小同时变化,不做详解

2.关键词:relative

这种方式居中也很纠结,必须根据网页大小以及div大小来控制居中,同1,不做过多解释

3.关键词:float

这种方式我推荐,所以我对上面html代码进行了样式布局,样式如下:

  1. <style type="text/css"
  2. .Box{margin0 auto;width400px;} //400px为li的总宽度,可以随自己大小变换自定义,适应性强 
  3. .Box ul{list-style-type:none } 
  4. .Box ul li{ floatleft
  5. </style> 

4.关键词:display 

这种方法比较好,我一直是用这种方法,核心就是把行级元素变化成块级元素,附上样式:

  1. <style type="text/css">  
  2. .Box{margin-top:10px;background:#D9EBF5;text-align:center;} //控制Box中的内容居中  
  3. .Box ul{ padding:4px 0;margin:0;overflow:hidden;}  
  4. .Box li{ display:inline;padding:0;} //将li转换成块级元素展现  
  5. </style>  

小结:1,2适应性不够强,3,4我主推,当然个人喜好不同,同时也考虑到维护的便捷性,各取所需