Question

我正在为我的网站制作大纲，而我的导航栏顶部出现问题。导航栏在我的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/

Answer 1

您关于菜单项现在位于span元素中。请移动到锚标签而不是跨度。 <span id="clicked">ABOUT</span>到<a id="clicked">ABOUT</a>。您的代码中也存在错误，第一个菜单项在<a>标记中打开，以<span>结尾，并且应该以{{1}}标记结尾。

<a>

我建议最佳做法是导航菜单的列表项。

导航栏项目是对齐的，但单击中间项目会导致它向左移动

1 个答案: