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

标签 html css navigation

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

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

相关文章:

JavaScript 或 JQuery : get innermost element on position

javascript - 如何在没有 If 语句的情况下执行通配符

css - 在 Windows 7 中禁用表单字段样式

html - CSS/HTML 导航栏问题

algorithm - 最快的带孔三角剖分算法?

html - 有人可以解释一下 HTML5 中的 contextmenu 属性的作用吗?

html - 为什么 HTML5 支持 `dir` 属性?

javascript - 当相应的 div 滚动到时,将类添加到适当的导航选项卡

javascript - 调整窗口大小时如何流动图像?

jquery-ui - 是否可以在全局范围内将 CSS3Pie 边框半径应用于 jQuery UI?