css實(shí)現(xiàn)ul和li橫向排列的方法有哪些?很多人都不太了解,今天小編為了讓大家更加了解css如何實(shí)現(xiàn)ul和li橫向排列,所以給大家總結(jié)了以下內(nèi)容,一起往下看吧。
創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷,包括網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營(yíng)銷策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營(yíng)銷等。創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案,創(chuàng)新互聯(lián)核心團(tuán)隊(duì)10余年專注互聯(lián)網(wǎng)開發(fā),積累了豐富的網(wǎng)站經(jīng)驗(yàn),為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù),在網(wǎng)站建設(shè)行業(yè)內(nèi)樹立了良好口碑。
因?yàn)閘i是塊級(jí)元素,默認(rèn)占一行的,要想實(shí)現(xiàn)橫向排列,一般通過以下兩個(gè)方法:
float:left
這樣設(shè)置有一個(gè)問題,li浮動(dòng)以后則脫離了文本流,即不占位置,如果它的父級(jí)元素有具體的樣式且沒有固定寬高,建議父元素清除浮動(dòng),或者設(shè)置固定寬高。
display:inline-block
即把li變?yōu)樾袃?nèi)元素且可以設(shè)置寬高以及邊距,這樣也有一個(gè)問題,低版本的Ie瀏覽器不兼容inline-block,建議在其后再加兩個(gè)屬性兼容低版本ie
*display:inline; *zoom:1;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>CSS + ul li 橫向排列的兩種方法 </title> </head> <body> <div id="nav"> <ul> <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li> <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li> <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li> <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li> </ul> </div> </body> </html>
css代碼一:
* { margin: 0; border: 0; padding: 0; font-size: 13pt; } #nav { height: 40px; border-top: #060 2px solid; border-bottom: #060 2px solid; background-color: #690; } #nav ul { list-style: none; margin-left: 50px; } #nav li { display: inline; line-height: 40px; float:left } #nav a { color: #fff; text-decoration: none; padding: 20px 20px; } #nav a:hover { background-color: #060; }
css代碼二:
* { margin: 0; border: 0; padding: 0; font-size: 13pt; } #nav { height: 40px; border-top: #060 2px solid; margin-top: 100px; border-bottom: #060 2px solid; background-color: #690; } #nav ul { list-style: none; line-height: 40px; margin-left: 50px; } #nav li { display: block; float: left; } #nav a { display: block; color: #fff; text-decoration: none; padding: 0 20px; } #nav a:hover { background-color: #060; }
關(guān)于css實(shí)現(xiàn)ul和li橫向排列的方法有哪些就分享到這里了,當(dāng)然并不止以上和大家分析的辦法,不過小編可以保證其準(zhǔn)確性是絕對(duì)沒問題的。希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值,可以學(xué)以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。
本文題目:css實(shí)現(xiàn)ul和li橫向排列的方法有哪些
分享URL:http://bm7419.com/article0/psddoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)、域名注冊(cè)、自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站、軟件開發(fā)
聲明:本網(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)