简单教程
提交运行
代码编辑器：
<!DOCTYPE html> <meta charset="utf-8"> <link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/> <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> <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> <footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
运行结果：