CSS里面我最不会用的就是UL LI这些了~~~~现在想把5张图片作为菜单显示在一行,怎么也不行~~~我倒!!!大家帮帮忙!
这是页面:
<!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=utf-8" />
<title>MainWebPage</title>
<link href="css/mycss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="menu">
<ul>
   <li><img src="images/collection.jpg" width="183px" height="63px"/></li>
   <li><img src="images/stores.jpg" width="183px" height="63px/></li>
   <li><img src="images/aboutus.jpg" width="183px" height="63px/></li>
   <li><img src="images/Press-Release.jpg" width="183px" height="63px/></li>
   <li><img src="images/contact.jpg" width="183px" height="63px/></li>
</ul>
</div>
<div id="show"></div>
<div id="indexlogo"><img src="images/indexlogo.jpg" width="300px" height="46px/></div>
<div id="copyright">Copyright ©2009  Oxana & Company All rights reserved.</div>
</div>
</body>
</html>这是CSS:
body {background-color: #ffffff;font:14px Verdana, Arial, Helvetica, sans-serif; margin:0px; color:#999999}#main{margin:auto; text-align:center; width:915px}#indexlogo{ text-align:right; margin:10px 0px 0px 0px}
#copyright{font-weight:bold;margin:20px 0px 10px 0px;font-size:12px}#menu{padding:0px}
#menu ul{list-style:none; margin:0px;}
#menu ul li{float:left;margin:0px;}
#show{margin:5px 0px 0px 2px;width:915px; color:#0000FF}

解决方案 »

  1.   

    给li加上float:left;样式就可以了!
      

  2.   

    <li>这个标签好像是自动换行的吧,怎么能显示在同一行呢
      

  3.   

    除了看到你的代码有以下的简单错误外,你的css代码是正确的。
       <li><img src="images/stores.jpg" width="183px" height="63px/></li>
       <li><img src="images/aboutus.jpg" width="183px" height="63px/></li>
       <li><img src="images/Press-Release.jpg" width="183px" height="63px/></li>
       <li><img src="images/contact.jpg" width="183px" height="63px/></li>
      

  4.   

    list-style-type: none;
      要加这句吧
    可以变横排<!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" xml:lang="en" lang="en">
    <head>
    <title>水平导航条</title>
    <meta http-equiv="Content-Type" Type="text/html charset=GB2312" />
    <style type="text/css">
    ul#nav {
    list-style-type: none;
    margin:0;
    padding:0;
    }
    ul#nav li {
    float:left;
    margin:0px 20px;
    padding:0px;
    }
    ul#nav li a{
    display:block;
    width:100px;
    height: 28px;
    line-height: 28px;
    background-color:#ccc;
    text-decoration:none;
    text-align:center;
    }
    ul#nav li a:hover {
    background-color:#333;
    color: #fff;
    }
    </style>
    </head><body>
    <ul id="nav" >
    <li id="first"><a href="/">Water</a></li>
    <li id="second"><a href="/">Fire</a></li>
    <li id="three"><a href="/">Air</a></li>
    <li id="four"><a href="/">Earth</a></li>
    <li id="five"><a href="/">Beyond</a></li>
    </ul></body>
    </html>
      

  5.   


    这样可以了,楼主本来css对的了,是div标签写错了而已。写漏了。
      

  6.   

    UL LI这种东西也没什么,会用就会用了,不比用table的高级多少。
    不过如果不会用的话,还是有必要学习一下的。写惯了你会发现这样写简单高效,代码精简。
      

  7.   

    看了看,试了下,没有问题啊,确实可以横排显示啊,不知道你的问题处在那里,就用的你的代码,没有问题!只不过,不是在中间显示,在左边显示,如果调到中间
    #menu ul{list-style:none; margin:0px; margin-left:300px;}
    就可以了啊
    如果调li的间距,在li中写MARGIN-LEFT=?就可以了啊
      

  8.   


    不是这个问题~~~我看CSS和HTML都没问题~可是就不行~~我倒~~~不在一行是个问题~还有就是错乱~~跟其他几个层都错落了~
      

  9.   

    实在不行
    换个软件运行下是不是你的CSS样式库 不能解析
      

  10.   


    我用opera9,firefox3,ie7测试都没有其它问题。
      

  11.   

    <html xmlns="http://www.w3.org/1999/xhtml">改成<html>试试!
      

  12.   

    你可以用:display配合float方法,list-style-type用法不管用