<!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><title></title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">ul { padding: 0; margin: 0; list-style: none;}li { float: left; width: 160px; <!--这样设置后，为什么li ul里的li不会横线排列 如文章下的: CSS教程 DOM教程 XML教程 Flash教程（不这样排列） 而是: CSS教程 DOM教程 XML教程 Flash教程（这样排列） -->}li ul { display: none; top: 20px; }li:hover ul, li.over ul { display: block;}</style><script type="text/javascript"><!--//--><![CDATA[//><!--startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } }}window.onload=startList;//--><!]]></script></head><body><ul id="nav"> <li><a href="">文章</a> <ul> <li><a href="">CSS教程</a> </li> <li><a href="">DOM教程</a></li> <li><a href="">XML教程</a></li> <li><a href="">Flash教程</a></li> </ul> </li> <li><a href="">参考</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">XML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">Blog</a> <ul> <li><a href="">全部</a></li> <li><a href="">网页技术</a></li> <li><a href="">UI技术</a></li> <li><a href="">FLASH技术</a></li> </ul> </li></ul></body></html>
2 回答
_辣子
TA贡献12条经验 获得超2个赞
因为li设置的宽度是160px,ul是块级元素，默认宽度是父元素的100%，所以不会横线排列
可以让第一层的li相对定位，第二层的ul绝对定位（这样不会影响到后面元素的位置），给ul一个足够的宽度，li就会横线排列了
- 2 回答
- 0 关注
- 1457 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消