导航栏项目是合理的，但是单击中间的项目会使其向左移动
[英]Nav bar items are justified, but clicking the middle one causes it to shift left
问题描述
I'm making the outline for my website and I'm having a problem with my nav bar at the top. 
我正在为网站绘制轮廓，顶部的导航栏有问题。 The nav bar works fine on my index.html and contact.html, but when I click the middle link about.html , the item shifts to the left on the next page. 导航栏在index.html和contact.html上工作正常，但是当我单击about.html的中间链接时，该项目将移至下一页的左侧。
I think it has something to do with (display: flex) and (justify-content: space-between), but I don't really know. 我认为这与（display：flex）和（justify-content：space-weenween）有关，但我真的不知道。 I've provided two JSFiddles at the bottom to show the differences. 我在底部提供了两个JSFiddles来显示差异。
HTML 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 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/ index.html http://jsfiddle.net/9uu5aLv9/
about.html (this is the one with the problem) http://jsfiddle.net/udoe9k3t/ about.html（这是有问题的那个） http://jsfiddle.net/udoe9k3t/
1 个解决方案
解决方案1
2 已采纳 2015-10-17 00:37:45
You about menu item are in the span element right now. 您有关菜单项的信息现在位于span元素中。 please move to anchor tag instead of span. 请移至锚定标签，而不是跨度。 <span id="clicked">ABOUT</span> to <a id="clicked">ABOUT</a> . <span id="clicked">ABOUT</span>到<a id="clicked">ABOUT</a> 。 also there was a error in your code the first menu item opening in a <a> tag and ending with <span> that and should be end with the <a> tag. 您的代码中还有一个错误，第一个菜单项在<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>
I am recommending the best practice are the list item for the navigation menu. 我建议最佳做法是导航菜单的列表项。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.