大家帮我看看,为什么这个列表可以横排?
代码如下:
<!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>