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;

Answer 2

尝试在CSS中添加此行：

ul#menubar {
  white-space:nowrap;
}

属性white-space:nowrap强制li元素并排

元素仅显示有时

2 个答案: