导航栏错位问题-慕课网

导航栏错位问题

来源：3-4 企业网站制作之导航部分制作（一）

reup

2015-01-24 12:24

以下是HTML代码
<div class="nav">
  <div class="nav_left"></div>
  <div class="nav_mid">
    <div class="nav_mid_left">
      <ul>
        <li><a href="#">关于</a></li>
        <li><a href="#">动态</a></li>
        <li><a href="#">按类型分类</a></li>
        <li><a href="#">按机构分类</a></li>
        <li><a href="#">按风险分类</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </div>
    <div class="nav_mid_right">
      <form action="" method="post">
        <input type="text" class="search_text"/>
      </form>
    </div>
  </div><!--nav_mid结束-->
  <div class="nav_right"></div>
</div><!--nav结束-->




以下是CSS代码
.nav{height:40px;}

.nav_left{width:10px;
background:url(../%E7%B4%A0%E6%9D%90%E5%8C%85/images/nav_left.jpg) no-repeat;
}

.nav_mid{width:980px;
background:url(../%E7%B4%A0%E6%9D%90%E5%8C%85/images/nav_bg.jpg) repeat-x;
line-height:40px;}

.nav_right{width:10px;
background:url(../%E7%B4%A0%E6%9D%90%E5%8C%85/images/nav_right.jpg) no-repeat;
}

.nav_left,.nav_mid,.nav_right{
height:40px;
float:left;
display:inline;}

.nav_mid_left,.nav_mid_right{float:left;
display:inline;}

.nav_mid_left{width:680px;}

.nav_mid_right{width:300px;}




.nav_mid li {
	float: left;
	list-style-type: none;
	width: 100px;
	font-family: "微软雅黑";
	text-align: center;
}
.nav_mid a:link, .nav_mid a:visited {
	font-size: 16px;
	color: #FFF;
	text-decoration: none;
}
.nav_mid a:hover, .nav_mid a:active {
	font-size: 16px;
	color: #FF0;
	text-decoration: none;

写回答关注

10回答

pano

2015-04-15 23:24:22

卧槽我也是这样，看这个解决了，貌似下载全代码得那个压缩包有问题我解压错误。不过看这个解决了，谢谢大师。

0 0
学葩

2015-04-07 20:16:59

告诉浏览器，你的文档以HTML格式遵循W3C标准XHTML1.0协议

0 0
Devisn

2015-03-09 22:08:01

同问！也是这个问题，CSS代码对比发现没有问题啊！加了楼上那个回答之后就可以了，好奇怪！

0 0
小白小鲸

2015-03-02 19:34:46

同问，导航栏错位问题

0 0
sunshines

2015-02-28 16:42:03

同求也是这个问题！！！怎么改都不行啊

0 0
小石头_爱科技

2015-02-18 21:00:58

同求也是这个问题！！！

0 0
AlisonXu

2015-02-11 15:33:41

同疑问，希望老师能帮忙解答，谢谢！

0 0
好久没改名了想换个

2015-02-06 10:54:27

我也是这个问题！！！！后来试了楼上的方法，果然可以了求大神解答一下疑惑

0 0
Whisperd

2015-02-01 16:46:53

我也是这个问题，后来我经过代码对比，一个一个筛，发现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这个代码是关键，你试试，具体原因我也说不清，希望有人能解答这个问题！

0 7
俺要回到幼儿园当学霸

2015-01-26 01:33:09

你那个nav_left是设置那里的

0 0