正确显示导航的问题

Question

1. 我在向左/右悬停的“主页”添加空间时遇到问题。
2. 添加适当的间距，以便在“home”的悬停部分出现之后，出现 about 和其他页面。

CSS：

nav {
    width:460px;
    height:50px;
    background-color:#0066ff;
    float: left;
    margin: 15px 0 0 324px;
    position: fixed;
}

nav ul {
    margin: 0;
    padding: 0;
    position: fixed;
    width:493px;
    border: 1px solid green;
}

nav li {
        float: left;
    text-align: left;
    margin:0;
    padding: 0 0 0 24px;
    display: block;
    width: 51px;
    height: 50px;
}

nav li:first-child {
    float: left;
    text-align: left;
    margin:0;
    padding: 0 15px 0 0;
    display: block;
    height: 50px;
}

nav a:first-child {
    margin: 0;
    padding: 0;
    height: 50px;
    min-width:51px;
    display:block;
    position: fixed;
    line-height:50px;
    float: left;
    text-align: center;
}

nav a {
    margin: 0;
    padding: 0;
    height: 50px;
    min-width:51px;
    display:block;
    position: fixed;
    line-height:50px;
    float: left;
    text-align: center;
}


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

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

这个问题已经让我头疼了好几个小时。

Link Update

about 旁边的蓝色空间不可能发生。

Answer 1

尼克，您的问题出在 li:first-child 选择器中。特别是 padding 属性，它清除填充，您缺少间距。

• 您的许多 :first-child 选择器是多余的，不需要重新指定。
• 将position:fixed 与float:left 混合通常不是一个好主意，因为您的CSS 将与布局结构发生冲突。
• 您只需要一个 position:fixed 作为主容器，其余的导航的子容器将与它相关。
• 有很多不必要的填充等，您应该使用浏览器的 DOM 检查器来调整布局。

检查这个 JSFiddle 已清理完毕。

Answer 2

很多时候，一个小的<div> 被放置在“主页”链接的左侧以将其推过去，如下所示：

#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>

产生这个：

或者你可以给“home”按钮一个特定的类并单独为它添加额外的填充。

#home{
     padding-left:20px;
}

还有 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>

Answer 3

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

JSFiddle

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