Browser 不需要的导航堆栈与浏览器调整大小

这是我第一次来到这个论坛。我是一个网站设计的初学者，遇到了一个我找不到正确答案的问题。到目前为止，我在多个网站上搜索我的答案，但最接近我的问题是这个

我的问题如下：当我把浏览器窗口调整到很小的时候，我的nav ul列表会堆积起来……我知道一定有可能让它保持在桌面屏幕上的水平状态……比如苹果商店的页面上。我只是不知道我做错了什么

下面是我的代码…希望有人能帮助我，过滤掉我的错误

HTML

<div id="navcontainer">
<div id="navlist">
  <ul>
     <li id="active"><a href="home.html" target="_self" id="current">Home</a></li>
     <li><a href="about.html" target="_self">About</a></li>
     <li><a href="services.html" target="_self">Services</a></li>
     <li><a href="gallery.html" target="_self">Gallery</a></li>
     <li><a href="contact.html" target="_self">Contact</a></li>
  </ul>
</div>

CSS

 body {
margin: 200px 0px 10px 0px;
padding: 0px;
text-align: center;
background-image:url(../images/bg.jpg);
background-repeat: repeat;}


/*****  HEADER  *****/
#header {
width: 900px;
text-align: center;
font-family: Raleway;
font-size: 30px;
font-weight: bolder;
font-variant: normal;
color: rgba(51,51,51,1);
position: absolute;
display: block;
top: 0px;}


/*****  NAVIGATION  *****/

#navcontainer {
position: relative;
background-image: url(../images/navbar.png);
background-repeat: repeat-x;
height: 37px;
-o-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-moz-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-webkit-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
-ms-box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
box-shadow: 0em 0.2em 0.3em 0em rgba(51,51,51,0.8);
font-family: Raleway;
display: block;
width: 100%; }

#navlist {
float:left;
position:relative;
left:50%;
padding-top: 1.5px;}

#navlist ul {
float:left; /* IE6 needs this */
position:relative;
left:-50%;
list-style:none;
margin: 0 auto;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 100%;
font-style: normal;
font-weight: bolder;
font-variant: normal;
text-decoration: none;
padding: 0px; }

 #navlist li {
float:left;
display: inline;
padding-top: 6.8px;
padding-right: 25px;
padding-bottom: 6.8px;
padding-left: 25px;}

 #navlist li a {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 19px;
padding-bottom: 6.8px;
padding-left: 19px;}

#navlist li a:hover {
background-image: url(../images/navbar3.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
paddin-left: 19px;}

#navlist li a:active {
background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1); }


#navlist li a:visited {
text-decoration: none;
color: #424242;
padding-top: 6.8px;
padding-right: 0px;
padding-bottom: 6.8px;
padding-left: 0px;}

#navlist li a:focus {
    background-image: url(../images/navbar1.png);
background-repeat: no-repeat;
background-position: bottom;
padding-right: 19px;
padding-left: 19px; 
    border-width: 1px;
border-top-style: inset;
border-right-style: inset;
border-bottom-style: none;
border-left-style: inset;
border-top-color: rgba(102,102,102,1);
border-right-color: rgba(153,153,153,1);
border-left-color: rgba(153,153,153,1);
text-shadow: 1px 1px #FFF, -0.3px -0.3px #000;}

HTML







CSS
身体{
保证金：200px 0px 10px 0px；
填充：0px；
文本对齐：居中；
背景图像：url（../images/bg.jpg）；
背景重复：重复；}
/*****标题*****/
#标题{
宽度：900px；
文本对齐：居中；
字体系列：雷威；
字体大小：30px；
字体大小：粗体；
字体变体：正常；
颜色：rgba（51,51,51,1）；
位置：绝对位置；
显示：块；
顶部：0px；}
/*****航行*****/
#导航集装箱{
位置：相对位置；
背景图像：url（../images/navbar.png）；
背景重复：重复-x；
高度：37像素；
-o形盒阴影：0em 0.2em 0.3em 0em rgba（51,51,51,0.8）；
-莫兹盒阴影：0em 0.2em 0.3em 0em rgba（51,51,51,0.8）；
-网络工具包盒阴影：0em 0.2em 0.3em 0em rgba（51,51,51,0.8）；
-ms盒影：0em 0.2em 0.3em 0em rgba（51,51,51,0.8）；
箱形阴影：0em 0.2em 0.3em 0em rgba（51,51,51,0.8）；
字体系列：雷威；
显示：块；
宽度：100%；}
#导航列表{
浮动：左；
位置：相对位置；
左：50%；
填充顶部：1.5px；}
#导航列表{
float:left；/*IE6需要这个*/
位置：相对位置；
左-50%；
列表样式：无；
保证金：0自动；
字体系列：“Palatino Linotype”，“Book Antika”，Palatino，衬线；
字体大小：100%；
字体风格：普通；
字体大小：粗体；
字体变体：正常；
文字装饰：无；
填充：0px；}
#李海军{
浮动：左；
显示：内联；
垫面：6.8px；
右边填充：25px；
垫底：6.8px；
左填充：25px；}
#海军陆战队{
文字装饰：无；
颜色：#4242；
垫面：6.8px；
右侧填充：19px；
垫底：6.8px；
左填充：19px；}
#导航列表李a：悬停{
背景图像：url（../images/navbar3.png）；
背景重复：无重复；
背景位置：底部；
右侧填充：19px；
左paddin:19px；}
#导航列表a:活动{
背景图像：url（../images/navbar1.png）；
背景重复：无重复；
背景位置：底部；
边框宽度：1px；
边框顶部样式：插图；
右边框样式：插图；
边框底部样式：无；
左边框样式：插图；
边框顶部颜色：rgba（102102,1）；
右边框颜色：rgba（1531,1）；
左边框颜色：rgba（153153,1）；}
#李娜：参观了{
文字装饰：无；
颜色：#4242；
垫面：6.8px；
右边填充：0px；
垫底：6.8px；
左填充：0px；}
#李娜：焦点{
背景图像：url（../images/navbar1.png）；
背景重复：无重复；
背景位置：底部；
右侧填充：19px；
左侧填充：19px；
边框宽度：1px；
边框顶部样式：插图；
右边框样式：插图；
边框底部样式：无；
左边框样式：插图；
边框顶部颜色：rgba（102102,1）；
右边框颜色：rgba（1531,1）；
左边框颜色：rgba（1531,1）；
文本阴影：1px 1px#FFF，-0.3px-0.3px#000；}

我的导航也有同样的问题。我的导航结构与下面的解决方案不完全相同，但是应用CSS效果很好

这是我找到的解决办法

HTML

<ul id='navbar'>
<li><a href='#'> 1 </a></li>
<li><a href='#'> 2 </a></li>
<li><a href='#'> 3 </a></li>
<li><a href='#'> 4 </a></li>
<li><a href='#'> 5 </a></li>
<li><a href='#'> 6 </a></li>
</ul>

#navbar {margin:0; padding:0; overflow:hidden; width:100%;}
li      {width:100%}
li a    {padding: 6px 0; float:left; width:16%; text-align:center;}