显示导航正常的问题

Question

1. 我在为徘徊的＆＃34;家庭＆＃34;添加空间方面遇到了麻烦。右/左。
2. 在＆＃34; home＆＃34;的悬停部分之后添加适当的间距。似乎即将推出其他页面。

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



旁边的蓝色空间无法发生。

Answer 1

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

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

选中已清理过的 JSFiddle 。

Answer 2

很多时候，一个小<div>位于＆＃34; home＆＃34;的左边。链接推送它如下：

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

产生这个：

或者你可以给＃34; home＆＃34;按下一个特定的类并单独添加额外的填充。

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