在css中可以透過float屬性來定義元素在哪個方向浮動;想要左浮動則只需將元素的float屬性的值設為left(float:left)即可。下面就來跟大家介紹float屬性,希望對你們有幫助。
css float屬性
float 屬性指定一個盒子(元素)是否應該浮動,在哪個方向浮動。浮動元素會產生一個區塊級框,而不論它本身是何種元素。
注意: 絕對定位的元素忽略float屬性!
語法:
float: left|right|none|inherit;
屬性值:
left:元素向左浮動。
right:元素向右浮動。
none:預設值。元素不浮動,並會顯示在文字中出現的位置。
inherit:規定應該從父元素繼承 float 屬性的值。
範例:設定元素左浮動,建立一個水平選單
<!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元素和元素左浮動。 li元素將顯示為內聯元素(沒有換行符的元素之前或之後),這迫使清單為一行。 ul元素的寬度的100%,每一個超連結清單的寬度6 em(目前字體大小的6倍)。我們還添加一些顏色和邊界使其更高檔。以上是css左浮動怎麼寫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!