源代碼
點擊運行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>教程</title> <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> <p> 上面的示例中,我們讓ul元素和元素浮動。 li元素將顯示為內聯元素(沒有換行符的元素之前或之後)。這迫使列表為一行。 ul元素的寬度的100%,每一個超鏈接列表的寬度6 em(當前字體大小的6倍)。 我們添加一些顏色和邊界使其更高檔。</p> </body> </html>
運行結果