Html 正确显示导航的问题 我在向右/左悬停的“home”添加空间时遇到问题 添加适当的间距，以便在“主页”的悬停部分出现后，其他页面将随之出现

CSS:

这个问题让我头痛了好几个小时。

---

“关于”旁边的蓝色空格不可能出现。

尼克，您的问题在

li:first child

选择器中。特别是

padding

属性，在该属性中，它清除了填充，即缺少间距

• 许多

  ：first child

  选择器是多余的，不需要重新指定
• 混合

  position:fixed

  和

  float:left

  通常不是一个好主意，因为CSS将与布局结构发生冲突
• 对于主容器，您只需要一个

  位置：fixed

  ，其余的导航子容器将与此相对
• 有很多不必要的填充，因此，您应该使用浏览器的DOM检查器来处理布局

检查已清理干净的

---

很多时候，在“主页”链接的左侧放置一个小的

，将其按如下方式推过来：

#fillerdiv{
width:20px;
background-color:#0066ff;
}

然后你可以这样放置它：

<nav>
<ul>
<div id="fillerdiv"></div>
              <li> <a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Work</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact</a></li>
        </ul>
    </nav>

以及HTML：

<nav>
        <ul>
              <li id="home"> <a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Work</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact</a></li>
        </ul>
    </nav>

我对您的代码进行了一些修改，并试图简化它。我希望你不介意

---

您可以共享JSFIDLE链接吗。这将是很容易测试确定，给我一点时间，因为一些原因，蓝色背景没有显示。但请参考我已经提供的图片。请看这张：需要修复。导航是标题的一部分，我希望在向下滚动时将其固定到位。谢谢！这正是我想要的结果。我已经试着修复这件事好几个小时了，我想这应该是一个小时的工作。我将尝试实施此解决方案。只需确保

nav

之后的第一个元素具有

页边距顶部：

，以便修复正确。我有点网络开发人员的直觉告诉我，你可能想要以水平方向为中心的交互方式。我以前也有过类似的体验，但不是这种效果。我只需要稍微修改一下代码。我想它可以进一步简化：）

#home{
     padding-left:20px;
}

<nav>
        <ul>
              <li id="home"> <a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Work</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact</a></li>
        </ul>
    </nav>

/* styles.css */
nav {       
    float: left;
   background: #0066ff; 
    border: 1px solid green;
}

nav ul {
    margin: 0;
    padding: 0;   
}

nav li {
    float: left;    
    display: block; 
}

nav a {
    margin: 0;
    padding: 0;
    padding:20px;   
color:#fff;
    text-align: center;
}

nav ul li a:link, nav ul li a:visited {
    text-decoration: none;  
    display:block;
}

nav ul li a:hover, nav ul li a:active {
    background: #929292;
    text-decoration: none;
    display:block;
}