MORE
了解詳細內容
當前位置:首頁 > 新聞觀點 > 建站知識 >

廊坊網絡公司教您如何實現網站導航水平居中

文章來源:http://www.qrhzhg.live | 本文作者:小編 | 發布時間:2016-10-08 13:19:22 | Tag標簽:網站建設知識
10

08 2016

在網站頁面制作中讓網站導航水平居中是很常見的,其實現方法非常的多,但是大多數會存在不兼容的問題,同時基于大多數朋友還不知道哪種讓網站導航居中的方法兼容性好,或有的朋友朋友想多了解一些讓網站導航居中的方法,以備在制作網站導航時隨心所欲,所以在今天的內容中,小編將為大家匯總了幾種好用的實現網站導航水平居中的方法,以下是詳細的實例操作。
 
實現網站導航水平居中
 
第一種方法:使用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;
}
 
方法四:使用display:inline-flex解決
 
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瀏覽器。
 
第二種方法:使用position:relative解決
 
position:relative定位方法來讓元素水平居中,一般來說小編推薦這方法,因為代碼多了個div去包住,當然這些是根據情況來使用的。將定位div設為浮動,再定位left:50%,然后導航定位至left:-50%。
 
第三種方法:使用display:inline-block控制
 
這個方法比較簡單,是將容器轉成display:inline-block行內塊級元素,然后就可以直接用text-align:center使其達到水平居中效果。HTML代碼中需要一個div來包圍這個導航菜單。
 
其實解決網站導航居中的辦法有很多,以上匯總的是常用的CSS代碼為例,這種代碼操作很方便,后期修改的時候也簡單,其實這些方法很好的解決了網站導航菜單居中的問題,使用CSS編寫有助于后期的修改,極大的方便了我們的操作和節省了寶貴的時間。在以后的內容中,小編還將會繼續為朋友們分享更多更有價值的知識。
相關內容
網站導航:首 頁 | 關于我們 | 服務項目 | 新聞觀點 | 客戶案例 | 解決方案 | 聯系我們
澳洲幸运10开奖历史 南宁麻将规则打法 极速飞艇彩票官网 3d字谜图谜画谜 哪方面理财好一点 竞彩比分串关规则 一定牛福建快3 网上赚钱网 云赚打码是真的吗 微乐贵阳麻将辅助软件神器 贵州快三对子出现规律 湖北十一选五手机版 福彩3d1000期开奖结果 11选5官方助手 球探体育比分app苹果版下载 浙江20选五开奖今晚开奖结果 牛股股票微信群