html - 在同一个div中添加新的a和span后，部分文本背景没有出现

Question

我有一个小问题或故障问题。任何人都可以告诉我为什么从imgA“注销”的原因转到imgB .当我放置被注释为“//New !!”的新行时，就会发生这种情况。在给出的 HTML 代码中。问题发生在“正确的”div 上。我提供了标题的全部代码。

左侧和中间 div 的 CSS 代码

.header {
    background: #FFF;
    display: flex;
    flex: 0 1 50px;
    flex-flow: row;
    line-height: 50px;
}
.header > #left {
    background: transparent;
    color: #535659;
    cursor: pointer;
    flex: 0 1 auto;
    font-size: 30px;
    padding: 0 10px 0 70px;
}
.header > #left:after,
.header > #left:before {
    background: rgba(0, 173, 181, 0.6);
    border-bottom-right-radius: 50%;
    border-top-right-radius: 50%;
    content: "";
    left: 10px;
    height: 30px;
    position: absolute;
    top: 10px;
    width: 30px;
}
.header > #left:before {
    background: rgba(250, 85, 85, 0.8);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 0%;
    border-top-left-radius: 50%;
    border-top-right-radius: 0%;
    left: 30px;
}
.header > #mid {
    background-color: teal;
    flex: 1 1 auto;
}

右侧div的CSS代码

.header > #right {
    background: transparent;
    flex: 0 1 auto;
    font-size: 20px;
    padding: 0 10px;
    text-decoration: none;
}
.header > #right > .logout {
    background: #FA5555;
    border: 2px solid #FA5555;
    border-radius: 30px;
    color: #FFF;
    cursor: pointer;
    padding: 3px 10px 3px 10px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
 }
.header > #right > .option {
    background: #FFF;
    color: #000;
    cursor: pointer;
}

HTML 代码( imgA 当没有“//New!!”时，imgB 添加“”//New!! 后。注意:“//New!!”只是我放的装饰在这里突出显示影响问题的行。在真正的 HTML 文件中，我没有把它。)

<div class="header">
    <div id="left"><b>SPAP</b>r</div>
    <div id="mid"></div>
    <div id="right">
        <a class="option" onclick=""><span>Register</span></a> // New!!
        <a class="option" onclick=""><span>Settings</span></a> // New!!
        <a class="logout" onclick=""><span>Log Out</span></a>
    </div>
</div>

谢谢。

Answer 1

欢迎来到 Stack Overflow 53iky0，
双斜杠“//”用于在 JavaScript 中注释掉某些内容，如果您想在 HTML 中注释掉某些内容，则需要使用“<!-- -->”，所以只需更改

// New!!

到

<!-- New!! -->

希望对你有帮助