案例：CSS3 案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<html>
2
<head>
3
<style type="text/css">
4
ul
5
{
6
float:left;
7
width:100%;
8
padding:0;
9
margin:0;
10
list-style-type:none;
11
}
12
a
13
{
14
float:left;
15
width:7em;
16
text-decoration:none;
17
color:white;
18
background-color:purple;
19
padding:0.2em 0.6em;
20
border-right:1px solid white;
21
}
22
a:hover {background-color:#ff3300}
23
li {display:inline}
24
</style>
25
</head>
26
​
27
<body>
28
<ul>
29
<li><a href="#">Link one</a></li>
30
<li><a href="#">Link two</a></li>
31
<li><a href="#">Link three</a></li>
32
<li><a href="#">Link four</a></li>
33
</ul>
34
​
35
<p>
36
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
37
</p>
38
​
39
</body>
40
</html>
41
​