案例：CSS案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
​
2
<!DOCTYPE html>
3
<html>
4
<head>
5
<style>
6
ul
7
{
8
list-style-type:none;
9
margin:0;
10
padding:0;
11
overflow:hidden;
12
}
13
li
14
{
15
float:left;
16
}
17
a
18
{
19
display:block;
20
width:60px;
21
background-color:#dddddd;
22
}
23
</style>
24
</head>
25
​
26
<body>
27
<ul>
28
<li><a href="#home">Home</a></li>
29
<li><a href="#news">News</a></li>
30
<li><a href="#contact">Contact</a></li>
31
<li><a href="#about">About</a></li>
32
</ul>
33
​
34
<p><b>注释：</b>如果没有规定 !DOCTYPE，则浮动项目会产生意想不到的结果。</p>
35
​
36
<p>为了显示出链接区域，我们为链接添加了背景色。</p>
37
​
38
<p><b>注释：</b>向 ul 元素添加 overflow:hidden，是为了防止 li 元素出现在列表之外。</p>
39
​
40
</body>
41
</html>
42
​