用li来给菜单布局，所以li的属性中加了一句 display:inline;让其在一行中显示。但当这个时候我无法给li限制高度和宽度。给布局上带来很大的不便。
Li，默认情况下，是块级元素，但我们给其加上了display:inline;使得其变为了内联元素。内联属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。
在这个时候，如果我们要给li进行定义宽度和高度，我们就要用到float:left;(左浮动)
float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。
-------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.flyso.cn--有关于li...</title>
<style>
#test1 li{
display:inline;
background-color:black;
color:white;
font-size:12px;
width:120px;
height:20px;
padding:10px;
}
#test2 li{
display:inline;
float:left;
background-color:black;
color:white;
font-size:12px;
width:120px;
height:20px;
padding:10px;
}
</style>
</head>
<body>
<div id="test1"><li id="test1">测试li</li></div><br />
<div id="test2"><li id="test1">测试li</li></div><br />
<br />
</body>
</html>