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

跨浏览器实现float:center

时间:2008-10-29 01:12:29  来源:  作者:

  第二电脑网导读:160;  <li>列表一</li>        <li>列表二</li>        <li>列表三</li>    </ul></div>我们希望实现li是浮动的,并且居中的(li个数不固定,ul宽度未知)。可以设置ul的text-align:center,再设置...
  正文:

我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。

<div id="macji">
    <ul class="macji-skin">
        <li>列表一</li>
        <li>列表二</li>
        <li>列表三</li>
    </ul>
</div>

我们希望实现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;
}

查看演示

"跨浏览器实现float:center"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-29/3594.html


关键字:

关于《跨浏览器实现float:center》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td