html - 导航栏问题 - 形成步骤

Question

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

网站是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>

Answer 1

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

您的导航列表结构更适合简单的无序列表:

<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; 的 block 流元素(注意这不会影响元素的内联/ block 语义，它严格来说是视觉的东西)并应用 float: left;到 <li>元素。