html - 元素有时只显示

Question

我正在尝试为我的网站制作一个带有home、about 和contact 链接的菜单栏。它们在页面右侧对齐。出于某种原因，当我重新加载页面时，有时联系人似乎返回到下一行。我不必为了这件事而改变任何东西。这是相关的 CSS:

ul#menubar {
    display: inline-block;
    list-style-type: none;
    font-family: "Cantarell";
    float: right;
    margin-right: 5%;
    margin-top: 0;
    margin-bottom: 0;
}

li.menubar_item {
    display: inline-block;
    padding-right: 5%;

}

li.menubar_item a {
    color: #D2F2FE;
    text-decoration: none;
}

div.menubar_div {
    height: 150px;
    padding-right: 5%;
 }

和 HTML:

<ul id="menubar">
    <li class="menubar_item">
        <a href="index.html"><div class="menubar_div">Home</div></a>
    </li>
    <li class="menubar_item">
        <a href="#about"><div class="menubar_div">About</div></a>
    </li>
    <li class="menubar_item">
        <a href="#"><div class="menubar_div">Contact</div></a>
    </li>
</ul>

Answer 1

是你的 padding-right: 5% 毁了它。由于您没有为 ul#menubar 设置宽度，它会自动设置为 100%。问题是宽度随着填充而扩展，导致它总共达到 115% (100 + 5x3)。

您可以将此添加到您的 ul#menubar:

width: 85%; 
text-align: right;