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
這個方法比較簡單,是將容器轉(zhuǎn)成「display:inline-block」行內(nèi)塊級元素,然后就可以直接用「text-align:center」使其達到水平居中效果。
HTML代碼:
這里我們需要一個div來包圍這個導(dǎo)航菜單。
<div class="navbar">
<ul>
<li><a href="/">首頁</a></li>
…
</ul>
</div>
CSS代碼:
給外面的div添加「text-align:center」,然后將菜單容器設(shè)成「display:inline-block」行內(nèi)塊級元素,菜單浮左「float:left」
.navbar {
text-align:center;
}
.navbar ul {
display:inline-block;
}
.navbar li {
float:left;
}
.navbar li + li {
margin-left:20px;
}
這里瀏覽器兼容只能是IE8或更高版本,所以如果要兼容IE7的話,請加入以下代碼
.navbar ul {
display:inline;
zoom:1;
}
方法2:position:relative
這是使用「position:relative」定位方法來讓元素水平居中,我不是很推薦這方法,因為代碼多了個div去包住,當然這些是根據(jù)情況來使用的。
HTML代碼:
<div class="navbar">
<div>
<ul>
<li><a href="/">首頁</a></li>
…
</ul>
</div>
</div>
CSS代碼:
將定位div設(shè)為浮動,再定位「left:50%」,然后導(dǎo)航定位至「left:-50%」,這方法很有意思吧。可能表達不是很清楚,自己看代碼吧^^
.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,請?zhí)砑右韵聵邮剑?/p>
.navbar {
position:relative;
}
方法3:display:table
如果你喜歡簡潔的代碼,哪么這個方法就非常適合你了。
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;
}
瀏覽器兼容:這方法代碼精簡,但不支持IE7及以下版本……
方法4:display:inline-flex
有關(guān)flex layout的知識自己查下吧>_<
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;
}
瀏覽器兼容:這個兼容比較低,只支持Firefox或chrome、Opera 12這些較新的瀏覽器。
寫在最后,介紹了這么多方法,每種方法都有不同的好壞,這些視項目情況而定,對于我來說,「display:inline-block」是比較適合大眾化的,因為它兼容性比較好嘛!
文章名稱:CSS導(dǎo)航菜單水平居中的多種方法
文章出自:http://m.newbst.com/news18/292318.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、手機網(wǎng)站建設(shè)、小程序開發(fā)、定制網(wǎng)站、企業(yè)建站、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容