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开奖历史 承包快递一片赚钱吗 剑灵最赚钱方法 鑫科材料股票行情 中国股市真正赚钱的人 又能赚钱又能立马提现的软件 广西股票融资 科创板业务股票涨跌幅限制为 大芬村 赚钱 吗 微信赚钱麻将 做豆腐 赚钱吗 赚钱 数码 有类似钱咖赚钱的吗 昆山什么赚钱 新世相读书会读书赚钱 砂厂赚钱亿万富翁 中孚实业股票