导航栏内的文本在其他屏幕尺寸上自动向右移动

Question

我这几天一直在尝试解决这个问题。 我的导航栏上的文本有问题（这也发生在<div>s 之间的其他列表上）当我在我的屏幕以外的屏幕上查看我的网站时，它的行为很奇怪并且一直向右移动即使我使用百分比，我仍然在编程。我认为问题在于 div 没有正确调整到更小或更大的获取屏幕。

This 是它在我的笔记本电脑上的样子，这就是我希望它在更大或更小的屏幕上的样子，但正如我所说，它在不同的屏幕上会向右移动。

我是一个新程序员，所以如果你看到无用的代码，请忽略它。我还在学习很多东西，但似乎我无法弄清楚。

HTML：

<div id="navbar">

<ol id="navbartext">

    <a href="buynow.html"><li class="navbarhover" >Buy Now</li></a>
    <li>&nbsp;</li>
    <li class="lijn"></li>
    <li>&nbsp;</li>
    <a href="news.html"><li href="news.html" class="navbarhover">News</li></a>
    <li>&nbsp;</li>
    <li class="lijn"></li>
    <li>&nbsp;</li>
    <a href="media.html"><li href="media.html" class="navbarhover">Media</li></a>
    <li>&nbsp;</li>
    <li class="lijn"></li>
    <li>&nbsp;</li>
    <a href="contact.html"><li href="contact.html" class="navbarhover">Contact</li></a>
    <li>&nbsp;</li>
    <li class="lijn"></li>
    <li>&nbsp;</li>
    <a href="aboutus.html"><li href="aboutus.html" class="navbarhover">About Us</li></a>

</ol></div> 

CSS：

#navbartext{
color: white;
font-family: Futura, Verdana, Arial;
position: absolute;
margin-left: 11%;
margin-top: 1%;
font-size: 120%;
padding: 0%;
}

#navbar{
position: absolute;
height: 5%;
width: 50%;
top: 20%;
left:50%;
margin-left: -25.1%;
padding: 5px;
border: 3px solid #008CBA;
background-color: #333;
margin-top: 2.5%;
font-size: 100%;
}    
li{
list-style-type: none;
display: inline;
font-size: 102%;
}

如果您需要查看更多代码，请告诉我。 感谢您阅读我真的需要帮助。 谢谢

Answer 1

ul{
  background-color:orange;
  list-style-type: none;
  display:block
}
li{
  color:white;
  display:inline-block;
}
#wrapper{
  margin-top:5%;
  height:5%;
  margin-left:18%;
  margin-right:18%;
}

<div id="wrapper">
<ul>
<a href="#"><li>Arma</li></a>
<li>&nbsp;</li>
<li>Sar</li>
<li>&nbsp;</li>
<li>VCS</li>
<li>&nbsp;</li>
<li>VCS</li>
<li>&nbsp;</li>
<li>VCS</li>
<li>&nbsp;</li>
<li>VCS</li>
<li>&nbsp;</li>
<li>VCS</li>
<li>&nbsp;</li>
</ul>
</div>

这是例子。其他风格自己放。