您好,登錄后才能下訂單哦!
小編給大家分享一下css左浮動(dòng)如何寫,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
css float屬性
float 屬性指定一個(gè)盒子(元素)是否應(yīng)該浮動(dòng),在哪個(gè)方向浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級框,而不論它本身是何種元素。
注意: 絕對定位的元素忽略float屬性!
語法:
float: left|right|none|inherit;
屬性值:
left:元素向左浮動(dòng)。
right:元素向右浮動(dòng)。
none:默認(rèn)值。元素不浮動(dòng),并會(huì)顯示在其在文本中出現(xiàn)的位置。
inherit:規(guī)定應(yīng)該從父元素繼承 float 屬性的值。
示例:設(shè)置元素左浮動(dòng),創(chuàng)建一個(gè)水平菜單
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300;} li {display:inline;} </style> </head> <body> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> </body> </html>
效果圖:
上面的示例中,我們讓ul元素和元素左浮動(dòng)。li元素將顯示為內(nèi)聯(lián)元素(沒有換行符的元素之前或之后),這迫使列表為一行。
ul元素的寬度的100%,每一個(gè)超鏈接列表的寬度6 em(當(dāng)前字體大小的6倍)。我們還添加一些顏色和邊界使其更高檔。
以上是css左浮動(dòng)如何寫的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。