为什么<ul><li>列表元素会横排？
源代码如下：
<!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> 无标题文档 </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= "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>
</body>
</html>
实际显示的效果是菜单是横排着的，通常 <ul> <li> 列表元素不是竖排的着的吗？为什么上述的代码可以将列表元素横排？
愿听其详！谢谢！
[解决办法]
DISPLAY:inline;可以改变显示方式
如
<div> aa </div> <div> bb </div>
<div style= "display:inline "> aa </div> <div style= "display:inline "> bb </div>
显示的结果就不同。
另外
float:left也可以改变显示的方式