div+css导航栏

下面是css代码，为什么导航条不是水平成一排显示的？？body{font-family:Verdana;font-size:14px;margin:0;}a:link,a... 下面是css代码，为什么导航条不是水平成一排显示的？？

body { font-family:Verdana; font-size:14px; margin:0;}
a:link,a:visited{font-size:12px;text-decoration:none;}
a:hover{}
body,ul,li,p,form,dl,dt,dd,input { margin:0; padding:0; }
ul { list-style:none; }
#container {margin:0 auto; width:100%;}
#header { height:185px; background:#9c6; margin-bottom:5px;}
#header .title { background:url(../images/8.gif); width:383px; height:46px; float:left; margin:40px auto auto

50px; }
#header .menu{margin:100px auto auto auto}
#header .menu ul{float:right;list-style:none;margin:0px;}
#header .menu ul li{float:left;margin:0 10px;display:block;line-height:28px}
#header .menu ul li a:link,#header .menu ul li a visited{font-weight:bold;color:#666}
#header .menu ul li a:hover{}

html代码
<body>

<div id ="header">
<div class="title"></div>
<div class="menu">

<ul>
<li><a href="#">原料信息</a></li>
<li><a href="#">流程</a></li>
<li><a href="#">渣系</a></li>
<li><a href="#">热力学</a></li>
</ul>

</div>
</div>
</body> 展开

 我来答

4个回答

#热议# 海关有哪些禁运商品？查到后怎么办？

赛兰德g
推荐于2016-04-26 · TA获得超过252个赞

知道小有建树答主

回答量：76

采纳率：0%

帮助的人：125万

我也去答题访问个人页

关注

展开全部

楼上的明显不对。。。
我不看代码只看图就知道你 ul 里没有加宽度
加flaot的元素必须加宽度，而且外层也得有宽度
最后别忘了清除浮动

这样写

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body { font-family:Verdana; font-size:14px; margin:0;}
a:link,a:visited{font-size:12px;text-decoration:none;}
a:hover{}
body,ul,li,p,form,dl,dt,dd,input { margin:0; padding:0; }
ul { list-style:none; }
#container {margin:0 auto; width:100%;}
#header { height:185px; background:#9c6; margin-bottom:5px;}
#header .title { background:url(../images/8.gif); width:383px; height:46px; float:left; margin:40px auto auto

50px; }
#header .menu{margin:100px auto auto auto}
#header .menu ul{float:right;list-style:none;margin:0px; width:100%}
#header .menu ul li{float:left;margin:0 10px;display:block;line-height:28px; width:100px;}
#header .menu ul li a:link,#header .menu ul li a visited{font-weight:bold;color:#666}
#header .menu ul li a:hover{}

</style>
</head>

<body>

<body>

<div id ="header">
<div class="title"></div>
<div class="menu">

<ul>
<li><a href="#">原料信息</a></li>
<li><a href="#">流程</a></li>
<li><a href="#">渣系</a></li>
<li><a href="#">热力学</a></li>
</ul>

</div>
</div>
</body>

</body>
</html>

追问

不行啊，按你说的变成这样了

追答

好吧给你弄个最简单的改法
就在#header .menu ul 这个属性里 加个宽度 就行了 你新建个页面把如下代码复制进去 看看

无标题文档

body { font-family:Verdana; font-size:14px; margin:0;}
a:link,a:visited{font-size:12px;text-decoration:none;}
a:hover{}
body,ul,li,p,form,dl,dt,dd,input { margin:0; padding:0; }
ul { list-style:none; }
#container {margin:0 auto; width:100%;}
#header { height:185px; background:#9c6; margin-bottom:5px;}
#header .title { background:url(../images/8.gif); width:383px; height:46px; float:left; margin:40px auto auto 

50px; }
#header .menu{margin:100px auto auto auto}
#header .menu ul{float:right;list-style:none;margin:0px; width:100%}
#header .menu ul li{float:left;margin:0 10px;display:block;line-height:28px}
#header .menu ul li a:link,#header .menu ul li a visited{font-weight:bold;color:#666}
#header .menu ul li a:hover{}

原料信息
    流程
    渣系
    热力学

这样就对了吧

本回答被提问者采纳

已赞过 已踩过<

评论收起

visc
2011-07-20 · TA获得超过119个赞

知道小有建树答主

回答量：231

采纳率：0%

帮助的人：196万

我也去答题访问个人页

关注

展开全部

我这边是显示在一排，代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body { font-family:Verdana; font-size:14px; margin:0;}
a:link,a:visited{font-size:12px;text-decoration:none;}
a:hover{}
body,ul,li,p,form,dl,dt,dd,input { margin:0; padding:0; }
ul { list-style:none; }
#container {margin:0 auto; width:100%;}
#header { height:185px; background:#9c6; margin-bottom:5px;}
#header .title { background:url(../images/8.gif); width:383px; height:46px; float:left; margin:40px auto auto

50px; }
#header .menu{margin:100px auto auto auto}
#header .menu ul{float:right;list-style:none;margin:0px;}
#header .menu ul li{float:left;margin:0 10px;display:block;line-height:28px}
#header .menu ul li a:link,#header .menu ul li a visited{font-weight:bold;color:#666}
#header .menu ul li a:hover{}
</style>
</head>

<body>

<div id ="header">
<div class="title"></div>
<div class="menu">

<ul>
<li><a href="#">原料信息</a></li>
<li><a href="#">流程</a></li>
<li><a href="#">渣系</a></li>
<li><a href="#">热力学</a></li>
</ul>

</div>
</div>

</body>
</html>

已赞过 已踩过<

评论收起

hshuaioo
2011-07-20 · 超过14用户采纳过TA的回答

知道答主

回答量：192

采纳率：0%

帮助的人：101万

我也去答题访问个人页

关注

展开全部

#hader .title,#header.menu{float:left} 然后给出这两个class的宽度
#header.menu li{ float:left}
#header.menu li a{display:block; magin:0 2px;padding:0 2px;}
<div id="header">
<h1 class="title"></h1>
<ul class="menu">
<li><a href="#">原料信息</a></li>
<li><a href="#">流程</a></li>
<li><a href="#">渣系</a></li>
<li><a href="#">热力学</a></li>
</ul>
</div>
应该差不多了的。你看看。

已赞过 已踩过<

评论收起

z1063154665
2011-07-21

知道答主

回答量：21

采纳率：0%

帮助的人：7.1万

我也去答题访问个人页

关注

展开全部

最外层加宽度...应该就OK了。

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

div+css导航栏

其他类似问题

为你推荐：