元素只显示

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＃菜单栏：

width: 85%; 
text-align: right; 

Answer 2

尝试加入这一行你的CSS：

ul#menubar { 
    white-space:nowrap; 
} 

酒店white-space:nowrap迫使li元素是侧旁边