Элемент показывает только иногда

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).

Вы можете добавить к вашей уль #:

строки меню

width: 85%; 
text-align: right; 

Answer 2

Попробуйте добавить эту строку в CSS:

ul#menubar { 
    white-space:nowrap; 
} 

Свойство white-space:nowrap вынудить li элементы, чтобы быть на стороне