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

css自適應(yīng)寬度 多種方法實(shí)現(xiàn)寬度自適應(yīng)的水平居中

  發(fā)布時(shí)間：2013-04-05 21:22:59   作者：佚名   我要評(píng)論
寬度自適應(yīng)達(dá)到水平居中在網(wǎng)頁(yè)制作中很常見(jiàn)而且很實(shí)用，本文整理搜集了一些實(shí)用的自適應(yīng)寬度的水平居中技巧，感興趣前端工程師們可以借鑒一下，或許對(duì)你有所幫助
當(dāng)父元素和子元素都沒(méi)有定義寬度的情況下實(shí)現(xiàn)水平居中：

display:inline-block
可以使用text-align:center和display:inline-block相結(jié)合，這個(gè)技巧需要一個(gè)父元素。
HTML代碼:

復(fù)制代碼
代碼如下:

<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>

CSS代碼:

復(fù)制代碼
代碼如下:

.navbar {
text-align:center;
}
.navbar ul {
display:inline-block;
}
.navbar li {
float:left;
}
.navbar li + li {
margin-left:20px;
}

IE系列IE8+支持，要IE7 IE6 支持需要加入以下代碼使display:inline像display:inline-block一樣

復(fù)制代碼
代碼如下:

.navbar ul {
*display:inline;
*zoom:1;
}

position:relative
使用position:relative與float相結(jié)合的技巧及其浮動(dòng)和定位參照物的關(guān)系，這個(gè)技巧需要兩個(gè)父元素，一個(gè)用來(lái)定位而另外一個(gè)用來(lái)避免出現(xiàn)滾動(dòng)條。
HTML代碼:

復(fù)制代碼
代碼如下:

<div class="navbar">
<div>
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>
</div>

CSS代碼:

復(fù)制代碼
代碼如下:

.navbar {
overflow:hidden;
}
.navbar > div {
position:relative;
left:50%;
float:left;
}
.navbar ul {
position:relative;
left:-50%;
float:left;
}
.navbar li {
float:left;
}
.navbar li + li {
margin-left:20px;
}

IE7下需要加入下列代碼支持：

復(fù)制代碼
代碼如下:

.navbar {
position:relative;
}

display:table
如果向使用極少的標(biāo)簽實(shí)現(xiàn)，這個(gè)方法是個(gè)不錯(cuò)的選擇。
HTML代碼:

復(fù)制代碼
代碼如下:

<ul class="navbar">
<li><a href="/">Home</a></li>
…
</ul>

CSS代碼:

復(fù)制代碼
代碼如下:

.navbar {
display:table;
margin:0 auto;
}
.navbar li {
display:table-cell;
}
.navbar li + li {
padding-left:20px;
}

不支持IE7及一下瀏覽器，其他的主流瀏覽器都支持。

display:inline-flex
這個(gè)方法需要使用 flex-layout 的知識(shí)。
HTML代碼:

復(fù)制代碼
代碼如下:

<div class="navbar">
<ul>
<li><a href="/">Home</a></li>
…
</ul>
</div>

CSS代碼:

復(fù)制代碼
代碼如下:

.navbar {
text-align:center;
}
.navbar > ul {
display:-webkit-inline-box;
display:-moz-inline-box;
display:-ms-inline-flexbox;
display:-webkit-inline-flex;
display:inline-flex;
}
.navbar li + li {
margin-left:20px;
}

使用CSS fit-content 值
下面看看如何用fit-content創(chuàng)建一個(gè)包含子元素浮動(dòng)的未知寬度的導(dǎo)航。
HTML代碼:

復(fù)制代碼
代碼如下:

<div class="navbar center">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About us</a></li>
<li><a href="/">Our products</a></li>
<li><a href="/">Customer support</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>

CSS代碼:

復(fù)制代碼
代碼如下:

.center ul{
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}

瀏覽器支持度較低 只Chrome和Firefox這樣的-webkit- -moz-內(nèi)核瀏覽器。當(dāng)然以后慢慢會(huì)發(fā)展起來(lái)的。
這個(gè)方式是推動(dòng)瀏覽器發(fā)展的一個(gè)新的東西，目前供應(yīng)于所以可以寫(xiě)前綴的瀏覽器，并沒(méi)有工作在IE9和IE9以下。
根據(jù)你的需求來(lái)選擇合適的方法吧，display:inline-block兼容性較好，flex-box將會(huì)用于未來(lái)。

演示

相關(guān)文章

最新評(píng)論