1

我的导航栏有问题。加载页面时，有时它会变为看起来像它的步骤，但是当您刷新它时它会恢复正常。我似乎无法找出我做错了什么！请帮忙！！

网站是http://www.pearsonfoods.com.au

<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>

<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>

<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>

<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>

<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>

</div>
4

2 回答 2

0

html

<ul class="nav">
   <li class="current"><a href="index.html">Home</a></li>
   <li> <a href="about.html">About Us</a></li>
   <li> <a href="where.html">Where we sell</a></li>
   <li> <a href="foods.html">Our Foods</a></li>
   <li> <a href="contact.html">Contact Us</a></li>
</ul>​

css

.nav {
    width: 900px;
    margin: 0 auto;
}
.nav li {
    background-color: rgba(0, 0, 0, 0.72);
    border-radius: 10px 10px 0px 0px;
    width: 180px;
    float:left;
}
.nav li a{
    color:#fff;
    text-decoration:none;
    text-align:center;
    line-height:50px;
    display:block;
}
.nav li a:hover,.nav li.current a{
    color:red;
}

链接到运行示例

于 2012-11-15T11:04:54.643 回答
0

您的标记格式不正确。<a>是“内联元素”并且<div>是“块元素”。块元素不能存在于内联元素中。

您的导航列表可以更好地构建为一个简单的无序列表：

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">About us</a></li>
    <li><a href="index.html">Where we sell</a></li>
</ul>

看？干净多了:)

将每个样式<li><a>设置为块流元素display: block;（请注意，这不会影响元素的内联/块语义，它是严格意义上的视觉事物）并应用于float: left;元素<li>。

于 2012-11-15T11:05:15.110 回答