我的导航栏有问题。加载页面时,有时它看起来像它的步骤,但是当您刷新它时它会变回正常。我似乎无法找出我做错了什么!请帮忙!!
网站是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>
最佳答案
您的标记格式不正确。 <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>
元素。
关于html - 导航栏问题 - 形成步骤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13396127/