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


<div class="Box">
      <ul>
          <li>我是居中</li>
          <li>我是居中</li>
          <li>我是居中</li>
          <li>我是居中</li>
          <li>我是居中</li>
          <li>我是居中</li>
          <li>我是居中</li>
      </ul>
</div>
1.关键词:margin  or padding
        这种方式居中很纠结,适应能力差,margin大小和padding大小都必须跟网页大小同时变化,不做详解
2.关键词: relative
        这种方式居中也很纠结,必须根据网页大小以及div大小来控制居中,同1,不做过多解释
3.关键词: float
        这种方式我推荐,所以我对上面html代码进行了样式布局,样式如下:
<style type="text/css">
        .
Box{margin: 0 auto;width: 400px;}  //400px为li的总宽度,可以随自己大小变换自定义,适应性强
        .
Box ul{list-style-type:none }
        .
Box ul li{ float: left}
</style>
4.关键词:display
        这种方法比较好,我一直是用这种方法,核心就是把行级元素变化成块级元素,附上样式:

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

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM