代码：

header.php中导航栏的代码段如下：

<center>

<div class="navholder">
<div class="navigate">
<ul class="navigate">
<li class="navigate"><a href="../index.php">Home</a></li>
<li class="navigate"><a href="../buses.php">Bus Routes</a></li>
<li class="navigate"><a href="../maps.php">Maps &amp; plans</a></li>
<li class="navigate"><a href="../news.php">News</a></li>
<li class="navigate"><a href="../myallocations.php">Enthusiasts</a></li>
<li class="navigate"><a href="../myroute/index.php">MyRoute</a></li>
<li class="navigate"><a href="../tbrtwitter.php">Live updates</a></li>
<li class="navigate"><a href="../tickets.php">Tickets</a></li>
</ul>
</div></div>

<div class="navigateopposite">
<ul class="navigateopposite">
<li class="navigateopposite"><a href="../conpasses.php">Free travel</a></li>
<li class="navigateopposite"><a href="../mobileservices.php">Mobile</a></li>
<li class="navigateopposite"><a href="../operators.php">Operators</a></li>
<li class="navigateopposite"><a href="../usingthebus.php">Using the bus</a></li>
<li class="navigateopposite"><a href="../team.php">TBR Team</a></li>
<li class="navigateopposite"><a href="../contact.php">Contact</a></li>
<li class="navigateopposite"><a href="../advertise.php">Advertising</a></li>
<li class="navigateopposite"><a href="../about.php">About</a></li>
</ul>
</div></div>

</center>

CSS：

相关的CSS也在这里：

/*Navigation bar*/
.navigate ul{float:left;width:1050px;margin-top:1px;text-align:center;}
.navigate ul li{display:inline;}
.navigate ul li a{width:127px;background:url(../images/navbar.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigate ul li a:hover{color: #fff;}
.navigate ul li a:active{color:#FFF;}

.navigateopposite ul{float:left;width:1050px;margin-top:1px;}
.navigateopposite ul li{display:inline;}
.navigateopposite ul li a{width:127px;background:url(../images/navbaropposite.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigateopposite ul li a:hover{color: #fff;}
.navigateopposite ul li a:active{color:#FFF;}

问题：

导致这种奇怪错位的原因是什么？

Answer 1

尝试将此添加到您的CSS

li.navigate, li.navigateopposite {
    float: left;
    margin: 0;
}

我通过Chrome的开发者工具添加了这个，它似乎可以解决问题。

这可能会解决它，但是认真......正如j08691和大卫托马斯所指出的......那是一些非常疯狂的HTML，你已经去了那里。除了好意外，我希望你不介意我做一些评论吗？

您的文档中有多个<head> - 您只能拥有一个。{/ li>
你纯粹是为了布局而使用<div> - 如果你需要在布局中添加空格你应该使用纯CSS ... HTML，正如名称所描述的那样，仅用于标记 - 不是样式信息。通过我的计算，你可能会失去至少一半的标记。作为一种概括，你拥有的标记越多，你就会越难以进入那些显然随意破坏的东西。
我能理解不想在推送时支持IE7，但所有版本的IE？（“有些东西不起作用？你正在使用Internet Explorer”）。我知道IE可能非常讨厌，但你不能把这本书扔到所有网站访问者的10％。

我希望这有助于让你朝着正确的方向前进。

突然错位导航栏

代码：

CSS：

问题：

1 个答案: