RUNOOB.COM
源代码：
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</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>
运行结果