html - 导航栏内的文本在其他屏幕尺寸上自动移至右侧

Question

这几天我一直在努力解决这个问题。 我的导航栏上的文本有问题(这也发生在 <div> 之间的其他列表中)当我在屏幕上而不是我的屏幕上查看我的网站时，它表现得很奇怪并且一直向右移动'尽管我使用百分比，但我仍在编程。我认为问题在于 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>

这是示例。其他风格放在自己身上。