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

Question

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

水平到垂直菜单，在浏览器窗口调整大小时。

我的问题如下：当我将浏览器窗口调整为小时，我的导航 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;}

Answer 1

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

这是我找到的解决方案。

http://jsfiddle.net/9x7Am/5/

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

.CSS

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