div+css中网页导航想要四个一组横排显示，共三列，我只写到这里，总是显示一列，该怎么改代码啊？

<body>
<div class="wraper">
<div class="topbanner"></div>
<div class="navwraper clearF">

<div class="line title"> </div>
<ul class="navul clearF">
<li class="title"><span><a href="#">首页</a></span></li>
<li class="title"><span><a href="#">法院简介</a></span></li>
<li class="title"><span><a href="#">新闻中心</a></span></li>
<li class="title"><span><a href="#">图片新闻</a></span></li>
</ul>
<ul class="navu clearF">
<li class="title"><a href="#">诉讼指南</a></li>
<li class="title"><a href="#">裁判文书</a></li>
<li class="title"><a href="#">诉讼服务</a></li>
<li class="title"><a href="#">法院公告</a></li>
</ul>
<ul class="nav clearF">
<li class="title"><a href="#">工作动态</a></li>
<li class="title"><a href="#">执行在线</a></li>
<li class="title"><a href="#">法学探讨</a></li>
<li class="title"><a href="#">法案时讯</a></li>
</ul>
</div>
</div>
</body>
html{background-color:#ededed;}
body{}
.title{padding-left:401px;font-size:13.33px;}
.title a{color:#000000;}
.clearF{overflow:hidden;zoom:1;}
.wraper{margin:0 auto;background-color:#ffffff;width:938px;}
.navwraper{padding-top:76px;}
/****public css****/
.topbanner{background:url(body_bg.png) 0 0 no-repeat;height:208px;margin:0 auto;}
.line{background:url(line.png) 0 0 no-repeat;height:13px;width:1px;}

举报该问题

推荐答案推荐于2016-10-14

看一下，

<html>
<body>
<style>
html{background-color:#ededed;}
body{}
.navul{float:left}
.title{font-size:13.33px;}
.title a{color:#000000;}
.clearF{overflow:hidden;zoom:1;}
.wraper{margin:0 auto;background-color:#ffffff;width:938px;}
.navwraper{padding-top:76px;}
/****public css****/
.topbanner{background:url(body_bg.png) 0 0 no-repeat;height:208px;margin:0 auto;}
.line{background:url(line.png) 0 0 no-repeat;height:13px;width:800px;}
</style>
  <div class="wraper">
   <div class="topbanner"></div>
   <div class="navwraper clearF">

     <div class="line title"> </div>
      <ul class="navul clearF">
      <li class="title"><span><a href="#">首页</a></span></li>
      <li class="title"><span><a href="#">法院简介</a></span></li>
      <li class="title"><span><a href="#">新闻中心</a></span></li>
      <li class="title"><span><a href="#">图片新闻</a></span></li>
     </ul>
      <ul class="navul clearF">
      <li class="title"><a href="#">诉讼指南</a></li>
      <li class="title"><a href="#">裁判文书</a></li>
      <li class="title"><a href="#">诉讼服务</a></li>
      <li class="title"><a href="#">法院公告</a></li>
     </ul>
      <ul class="navul clearF">
      <li class="title"><a href="#">工作动态</a></li>
      <li class="title"><a href="#">执行在线</a></li>
      <li class="title"><a href="#">法学探讨</a></li>
      <li class="title"><a href="#">法案时讯</a></li>
     </ul>
   </div>
  </div>
</body>
</html>

追问

谢谢啊。。。

温馨提示：答案为网友推荐，仅供参考

当前网址：http://55.wendadaohang.com/zd/Q8IFIcLcL.html

其他回答

第1个回答 2013-06-22

.navu{float:left}

要浮动。。。

欢迎追问追问

出来的效果根本不是我想要的那样的。。。

追答

你要什么效果？

追问

我已经做出来了，不麻烦你了。。。谢谢啊！

相似回答

CSS DIV 怎么做出来鼠标移动上就显示其内容?答：1、新建html文档，在body标签中添加一个div标签，然后在div标签中添加p标签，为p标签添加内容：2、为了方便演示，给div标签设置宽高和背景颜色，然后给p标签设置“display”属性，属性值为“none”，这样p标签中的文字默认情况下不会显示：3、给div设置hover伪类，当鼠标移动到div区域时，设置p标签的样式...

大家正在搜