欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

跨瀏覽器實現(xiàn)float:center

互聯(lián)網(wǎng)   發(fā)布時間：2008-10-17 19:26:11   作者：佚名   我要評論
原文： http://www.macji.com/blog/article/to-achieve-cross-browser-css-float-center/to-achieve-cross-browser-css-float-center/ 我們都知道float:left和float:right，但是否想過float:center呢？居中浮動。。。 <div id="macji"> <ul class

原文：
http://www.macji.com/blog/article/to-achieve-cross-browser-css-float-center/to-achieve-cross-browser-css-float-center/
我們都知道float:left和float:right，但是否想過float:center呢？居中浮動。。。
<div id="macji">
<ul class="macji-skin">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
</div>
我們希望實現(xiàn)li是浮動的，并且居中的（li個數(shù)不固定，ul寬度未知）?？梢栽O置ul的text-align:center,再設置li的display，可以實現(xiàn)居中，但這樣不是我們的初衷，我們需要實現(xiàn)float:center。
這里我們得先重溫一下position:relative，它將依據(jù)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;
}
擴展閱讀：
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

相關(guān)文章

  • css中position屬性使用詳解

    positon有4個屬性:static relative absolute fixed，我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什么意思呢？絕對是什么地方的絕對，相對又
    2014-11-28

  • css中定位中的absolute和relative是什么意思

    做一些浮動層等特殊特殊效果時要考慮到定位問題就要用到Position屬性，其有四個屬性值：static、fixed、absolute和relative，想必后面兩個大家都熟悉吧
    2014-04-15

  • CSS中的position:relative;的作用示例介紹

    CSS中的position:relative是控制元素相對定位的，relative 不脫離文檔流而absolute 脫離文檔流，relative 的元素盡管表面上看到它偏離了原來的位置，但它實際上在文檔流中
    2013-11-05

  • css relative相對定位的top值在不同瀏覽器中使用js獲取的差異

    relative是指相對于這個對象原來所在位置（參照）的值，下面為大家將講解下使用js獲取時在IE、chrome、oprea等瀏覽器中的區(qū)別，感興趣的朋友可以參考下
    2013-10-24

  • css中position:relative和overflow:hidden之間的問題

    在父標簽中使用了overflow:hidden;時，如果子標簽中有元素的position設置成relative的時候，在IE6和IE7中父元素的overflow對其將不起作用，其實將父標簽的position也設置成
    2013-09-04

  • css中position屬性(absolute|relative|static|fixed)概述及應用

    position屬性的相關(guān)定義：static：無特殊定位，對象遵循正常文檔流;relative：對象遵循正常文檔流;absolute：對象脫離正常文檔流fixed：對象脫離正常文檔流，有興趣的朋友
    2013-04-08

  • CSS position屬性absolute relative等五個值的解釋

    目前幾乎所有主流的瀏覽器都支持position屬性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE瀏覽器，IE9、IE10還沒測試過），以下是w3school對position五個值的
    2012-12-15

  • css 使用relative設置top為百分比值的方法(仿百度首頁)

    最近在學習HTML、CSS的過程中，想模仿一下百度首頁。發(fā)現(xiàn)搜索框這一部分與上下其它元素的空白距離可以隨著窗口大小變化，下面小編給大家?guī)砹薱ss 使用relative設置top為百
    2018-02-27

最新評論