Question

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

Horizontal to vertical menu, on browser window resize。

我的问题如下：当我将浏览器窗口调整为小时，我的导航ul列表会堆叠....我知道必须可以让它全部保持在桌面屏幕上，因为它...就像在例如，APPLE商店的页面。我不知道自己做错了什么。

下面是我的代码....希望有人可以帮助我并过滤掉我的错误。

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

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

1 个答案: