中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

CSS導(dǎo)航菜單水平居中的多種方法

2023-11-03    分類: 網(wǎng)站建設(shè)

CSS導(dǎo)航菜單水平居中的多種方法:

方法1:display:inline-block
方法2:position:relative
方法3:display:table
方法4:display:inline-flex
方法5:width:fit-content / width:intrinsic

方法1:display:inline-block

這個(gè)方法比較簡(jiǎn)單,是將容器轉(zhuǎn)成「display:inline-block」行內(nèi)塊級(jí)元素,然后就可以直接用「text-align:center」使其達(dá)到水平居中效果。

HTML代碼:

這里我們需要一個(gè)div來包圍這個(gè)導(dǎo)航菜單。

<div class="navbar">
<ul>
<li><a href="/">首頁</a></li>

</ul>
</div>

CSS代碼:

給外面的div添加「text-align:center」,然后將菜單容器設(shè)成「display:inline-block」行內(nèi)塊級(jí)元素,菜單浮左「float:left」

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

這里瀏覽器兼容只能是IE8或更高版本,所以如果要兼容IE7的話,請(qǐng)加入以下代碼

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

方法2:position:relative

這是使用「position:relative」定位方法來讓元素水平居中,我不是很推薦這方法,因?yàn)榇a多了個(gè)div去包住,當(dāng)然這些是根據(jù)情況來使用的。

HTML代碼:

<div class="navbar">
<div>
<ul>
<li><a href="/">首頁</a></li>

</ul>
</div>
</div>

CSS代碼:
將定位div設(shè)為浮動(dòng),再定位「left:50%」,然后導(dǎo)航定位至「left:-50%」,這方法很有意思吧??赡鼙磉_(dá)不是很清楚,自己看代碼吧^^

.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,請(qǐng)?zhí)砑右韵聵邮剑?/p>

.navbar {
position:relative;
}

方法3:display:table

如果你喜歡簡(jiǎn)潔的代碼,哪么這個(gè)方法就非常適合你了。

HTML代碼:

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

</ul>

CSS代碼:

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

瀏覽器兼容:這方法代碼精簡(jiǎn),但不支持IE7及以下版本……
方法4:display:inline-flex

有關(guān)flex layout的知識(shí)自己查下吧>_<

HTML代碼:

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

</ul>
</div>

CSS代碼:

.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;
}

瀏覽器兼容:不支持IE7及以下版本的IE瀏覽器。
方法5:width:fit-content

HTML代碼:

<div class="navbar">
<ul>
<li><a href="/">首頁</a></li>

</ul>
</div>

CSS代碼:

.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;
}

瀏覽器兼容:這個(gè)兼容比較低,只支持Firefox或chrome、Opera 12這些較新的瀏覽器。

寫在最后,介紹了這么多方法,每種方法都有不同的好壞,這些視項(xiàng)目情況而定,對(duì)于我來說,「display:inline-block」是比較適合大眾化的,因?yàn)樗嫒菪员容^好嘛!

文章名稱:CSS導(dǎo)航菜單水平居中的多種方法
文章出自:http://m.rwnh.cn/news18/292318.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、小程序開發(fā)、定制網(wǎng)站企業(yè)建站、網(wǎng)站改版

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作

網(wǎng)站建設(shè)知識(shí)

华安县| 山东省| 澄城县| 永顺县| 肥西县| 赤峰市| 车致| 嫩江县| 永兴县| 宁安市| 云梦县| 静安区| 阳春市| 延川县| 福建省| 阜平县| 延川县| 探索| 英吉沙县| 城市| 吐鲁番市| 礼泉县| 封丘县| 福建省| 平顺县| 门头沟区| 龙游县| 长海县| 平遥县| 万州区| 大方县| 宿州市| 东城区| 玛曲县| 鄂托克前旗| 靖西县| 涞源县| 民乐县| 北碚区| 临江市| 阿鲁科尔沁旗|