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

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;
}

Link to running example

Answer 2

您的标记格式不正确。 <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>元素。

导航栏问题 - 步骤形成

2 个答案: