导航栏项目是有道理的，但点击中间的导致它左移

我正在为我的网站制作轮廓，而且我的导航栏位于顶部。导航栏可以在我的index.html和contact.html上正常工作，但是当我点击中间链接about.html时，该项目会移到下一页的左侧。我认为它与（display：flex）和（justify-content：space-between）有关，但我不知道。 我在底部提供了两个JSFiddles以显示不同之处。导航栏项目是有道理的，但点击中间的导致它左移

HTML

<html lang="en"> 

<head> 
    <title>Cameron Behbahany</title> 
    <meta name="DESCRIPTION" content="Portfolio"> 
    <meta name="AUTHOR" content="Cameron"> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/> 
</head> 

<body> 
    <div class="header"> 
     <p class="headerleft"> 
      <a class="link" href="index.html">PROJECTS</span> 
      <span id="clicked">ABOUT</span> 
      <a class="link" href="contact.html">CONTACT</a> 
     </p> 

     <p class="headerright"> 
      <a class="logolink" href="index.html">BEHBA</a> 
     </p> 
    </div> 

</body> 

</html>

CSS

.header { 
    display: block; 
    margin: 0 auto; 
    width: 960px;} 

.headerleft { 
    display: flex; 
    justify-content: space-between; 
    float: left; 
    margin-top: 150px; 
    margin-bottom: 50px; 
    margin-left: 50px; 
    width: 275px; 
    font-family: "Nexa"; 
    font-size: 11px; 
    letter-spacing: 2px; 
    font-weight: 700; 
    color: lightgrey;} 

@font-face { 
    font-family: "NexaBlack"; 
    src: url(fonts/'NexaBlack.otf'); 
    font-style: normal; 
    font-weight: 900;} 

.headerright { 
    float: right; 
    margin-top: 150px; 
    margin-right: 50px; 
    margin-bottom: 60px; 
    width: 300px; 
    text-align: right; 
    font-family: "Nexa"; 
    font-size: 31px; 
    letter-spacing: 6px; 
    font-weight: 900; 
    color: grey;} 

a { 
    text-decoration: none; 
    color: lightgrey;} 

.link:hover { 
    border-bottom: 6px solid grey; 
    padding-bottom: 6px; 
    color: grey;} 

#clicked { 
    color: grey; 
    border-bottom: 6px solid grey; 
    padding-bottom: 6px; 
    font-weight: 700; 
    cursor: default;}

的index.html http://jsfiddle.net/9uu5aLv9/

个

about.html（这是一个有问题的） http://jsfiddle.net/udoe9k3t/

来源

2015-10-16 Cbehba

你正在关闭一个标签在你的第二个小提琴:)替换为。 –

您约菜单项都在span元素现在。请移动到锚定标记而不是跨度。 <span id="clicked">ABOUT</span>至<a id="clicked">ABOUT</a>。在您的代码中，第一个菜单项在<a>标记中打开并以<span>结尾，并且应该以<a>标记结束。

<html lang="en"> 

<head> 
    <title>Cameron Behbahany</title> 
    <meta name="DESCRIPTION" content="Portfolio"> 
    <meta name="AUTHOR" content="Cameron"> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all"/> 
    <style> 
    .header { 
    display: block; 
    margin: 0 auto; 
    width: 960px;} 

.headerleft { 
    display: flex; 
    justify-content: space-between; 
    float: left; 
    margin-top: 150px; 
    margin-bottom: 50px; 
    margin-left: 50px; 
    width: 275px; 
    font-family: "Nexa"; 
    font-size: 11px; 
    letter-spacing: 2px; 
    font-weight: 700; 
    color: lightgrey;} 

@font-face { 
    font-family: "NexaBlack"; 
    src: url(fonts/'NexaBlack.otf'); 
    font-style: normal; 
    font-weight: 900;} 

.headerright { 
    float: right; 
    margin-top: 150px; 
    margin-right: 50px; 
    margin-bottom: 60px; 
    width: 300px; 
    text-align: right; 
    font-family: "Nexa"; 
    font-size: 31px; 
    letter-spacing: 6px; 
    font-weight: 900; 
    color: grey;} 

a { 
    text-decoration: none; 
    color: lightgrey;} 

.link:hover { 
    border-bottom: 6px solid grey; 
    padding-bottom: 6px; 
    color: grey;} 

#clicked { 
    color: grey; 
    border-bottom: 6px solid grey; 
    padding-bottom: 6px; 
    font-weight: 700; 
    cursor: default;} 
    </style> 
</head> 

<body> 
    <div class="header"> 
     <p class="headerleft"> 
      <a class="link" href="index.html">PROJECTS</a> 
      <a id="clicked" href="javascript:void(0)">ABOUT</a> 
      <a class="link" href="contact.html">CONTACT</a> 
     </p> 
     <p class="headerright"> 
      <a class="logolink" href="index.html">BEHBA</a> 
     </p> 
    </div> 
</body> 
</html>

我推荐的最佳做法是导航菜单的列表项。

来源

2015-10-17 00:37:45

是的，谢谢。上述评论提到我关闭标记与。愚蠢的小错误。谢谢你的帮助。 – Cbehba

导航栏项目是有道理的，但点击中间的导致它左移

回答

相关问题