Question

我一直在努力解决这个问题。我的导航栏上的文本有问题（这也发生在<div>之间的其他列表）它表现得非常奇怪，当我在一个屏幕上查看我的网站时，它仍然向右移动即使我使用百分比，我也正在编程。我认为问题在于，divdo不能正确调整到更小或更大的屏幕。

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

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

这是一个例子。其他风格让你自己。

导航栏内的文本会自动移动到其他屏幕尺寸的右侧

1 个答案: