大家帮我看看，为什么这个列表可以横排？
代码如下：
<!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 " lang= "GBK ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=GBK " />
<title> Insert title here </title>
<style type= "text/css ">
#submenu { MARGIN: 0px 8px 0px 8px; PADDING: 4px 0px 0px 0px; BORDER: #fff 1px solid; BACKGROUND: #dfdfdf; COLOR: #666; HEIGHT:25px; }
#submenu ul { CLEAR: left; MARGIN: 0px; PADDING:0px; BORDER: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center; DISPLAY:inline; } #submenu li { FLOAT: left; DISPLAY: block; MARGIN: 0px; PADDING: 0px; TEXT-ALIGN: center}
#submenu li a { DISPLAY: block; PADDING:2px 3px 2px 3px; BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; FONT-WEIGHT: bold; WIDTH: 100%; COLOR: #444; TEXT-DECORATION: none; } #submenu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; COLOR: #fff; }
#submenu ul li#one A { WIDTH: 60px} #submenu ul li#two A { WIDTH: 80px} #submenu ul li#three A { WIDTH: 80px} #submenu ul li#four A { WIDTH: 90px} #submenu ul li#five A { WIDTH: 80px} #submenu ul li#six A { WIDTH: 80px} #submenu ul li#seven A { WIDTH: 60px} #submenu ul li#eight A { WIDTH: 90px} #submenu ul li#nine A { WIDTH: 80px}
</style>
</head>
<body>
<div id= "header "> </div>
<div id= "mainbox ">
<div id= "menu ">
<div id= "submenu ">
<ul>
<li id= "one ">
<a title= "首页 " href= "http://www.w3cn.org/ "> Home </a>
</li>
<li id= "two ">
<a title= "关于我们 " href= "http://www.w3cn.org/aboutus.html "> 关于我们 </a>
</li>
<li id= "three ">
<a title= "网站标准 " href= "http://www.w3cn.org/webstandards.html "> 网站标准 </a>
</li>
<li id= "four ">
<a title= "标准的好处 " href= "http://www.w3cn.org/benefits.html "> 标准的好处 </a>
</li>
<li id= "five ">
<a title= "怎样过渡 " href= "http://www.w3cn.org/howto.html "> 怎样过渡 </a>
</li>
<li id= "six ">
<a title= "相关教程 " href= "http://www.w3cn.org/tutorial.html "> 相关教程 </a>
</li>
<li id= "seven ">
<a title= "工具 " href= "http://www.w3cn.org/tools.html "> 工具 </a>
</li>
<li id= "eight ">
<a title= "资源及链接 " href= "http://www.w3cn.org/resources.html "> 资源及链接 </a>
</li>
<li id= "nine ">
<a title= "常见问题 " href= "http://www.w3cn.org/faq.html "> 常见问题 </a>
</li>
</ul>
</div>
</div>
<div id= "sidebar ">
sidbar
</div>
<div id= "content ">
content这里是主要内容，根据内容自动适应高度 这里是主要内容，根据内容自动适应高度
这里是主要内容，根据内容自动适应高度这里是主要内容，根据内容自动适应高度 这里是主要内容，根据内容自动适应高度
这里是主要内容，根据内容自动适应高度这里是主要内容，根据内容自动适应高度 这里是主要内容，根据内容自动适应高度
这里是主要内容，根据内容自动适应高度
</div>
<div>
test
</div>
</div>
<div id= "footer "> </div>
</body>
</html>
虽然将ul的DISPLAY设置为inline，但是 <a的标签的displya设置为了block了，按理说， <a> 应该是以 block方式渲染了，
可是为什么最终的呈现效果则是横排了呢？
[解决办法]
#submenu li { FLOAT: left; DISPLAY: block; MARGIN: 0px; PADDING: 0px; TEXT-ALIGN: center}
float:left; //加上这一句就横向排列，去掉就纵向排列了
[解决办法]
加上：float:left；就横向排列了
[解决办法]
看css说明
[解决办法]
#submenu li { FLOAT: left; DISPLAY: block; MARGIN: 0px; PADDING: 0px; TEXT-ALIGN: center}
FLOAT: left; 它给所有的LI 一个向左浮动 就像DIV一样 向左对齐差不多
[解决办法]
css核心之一就是float
lz好好看看相关知识!