您好,欢迎来到智榕旅游。
搜索
您的当前位置:首页css跨浏览器实现float:center_经验交流

css跨浏览器实现float:center_经验交流

来源:智榕旅游

代码如下:


  • 列表一

  • 列表二

  • 列表三




  • 我们希望实现li是浮动的,并且居中的(li个数不固定,ul宽度未知)。可以设置ul的text-align:center,再设置li的display,可以实现居中,但这样不是我们的初衷,我们需要实现float:center。

    这里我们得先重温一下position:relative,它将依据left,right,top,bottom等属性在正常文档流中偏移位置。那我们可以让ul为position:relative;left:50%,然后再让li像左浮动,在让它position:relative;right:50%(或者left:-50%),那么li就像向中间浮动一样居中了。废话不多说,先试试。
    代码如下:
    #macji{
    position:relative;
    width:100%;
    height:80px;
    background-color:#eee;
    text-align:center;
    overflow:hidden;
    }
    #macji .macji-skin{
    float:left;
    position:relative;
    left:50%;
    }
    #macji .macji-skin li{
    position:relative;
    right:50%;
    float:left;
    margin:10px;
    padding:0 10px;
    border:solid 1px #000;
    line-height:60px;
    }

    Copyright © 2019- zrrp.cn 版权所有 赣ICP备2024042808号-1

    违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务