CSS调整窗口大小，列出项目离开菜单

Question

img http://gyazo.com/63259876590cdf2353e3b9e759f9f8bf.png;

这就是如果我将调整我的屏幕大小或继续在一个小电脑屏幕上会发生什么。

这是应该的（我的桌面屏幕上100％大小）：

img2 http://gyazo.com/dad037d3f638e5d98de61e34b5c363de.png;

为什么会发生？可能需要自动检查宽度并使用百分比来代替？ 我不确定..

虽然这是我的代码。

HTML：

<div id="menu"> 
     <ul id="menuitems"> 
      <li id="menu-active"><a href="#" >HOMEPAGE</a></li></a> 
      <li><a href="#">PLAY NOW</a></li> 
      <li><a href="#">COMMUNITY</a></li> 
      <li><a href="#">HUNGER WIKI</a></li> 
      <li><a href="#">HIGHSCORES</a></li> 
      <li><a href="#">HELP</a></li> 
      <li><div id="login"></div></li> 
     </ul> 
    </div> 

CSS：

body { 
    background-color: #1e1e1e; 
    /*background-image: url("../img/background.png");*/ 
    background-repeat: no-repeat; 
    background-position: center top; 
    color: #fff; 
    font-size: 14px; 
} 

#logo { 
    background-image: url("../img/logo.png"); 
    background-repeat: no-repeat; 
    width: 465px; 
    height: 126px; 
    margin-left: 24%; 
    margin-top: 3%; 
} 

#menu { 
    background-image: url("../img/gradient-header.png"); 
    background-repeat: repeat; 
    width: 100%; 
    height: 56px; 
    border: solid 1px #000; 
    font-weight: bold; 
} 

#menuitems { 
padding: 0; 
margin: 0; 
float: left; 
} 

#menuitems li { 
    background-image: url("../img/gradient-header.png"); 
    background-repeat: repeat; 
    display: inline-block; 
    width: 140px; 
    height: 56px; 
    background-color: white; 
    float: left; 
    border-right: solid 1px #44acbf; 
    border-left: solid 1px #114a56; 
    line-height: 56px; 
    text-align: center; 
    -webkit-transition: all 200ms ease-in-out; 
     -moz-transition: all 200ms ease-in-out; 
     -ms-transition: all 200ms ease-in-out; 
     -o-transition: all 200ms ease-in-out; 
     transition: all 200ms ease-in-out;  
} 

#menuitems li:hover { 
    background-image: url("../img/gradient-1.png"); 
    background-repeat: repeat; 
    border-right: solid 1px #2b6e81; 
    cursor: pointer; 
    -webkit-transition: all 200ms ease-in-out; 
     -moz-transition: all 200ms ease-in-out; 
     -ms-transition: all 200ms ease-in-out; 
     -o-transition: all 200ms ease-in-out; 
     transition: all 200ms ease-in-out; 
} 

#menuitems li:active { 
    background-image: url("../img/gradient-onClick-menu.png"); 
    background-repeat: repeat; 
} 

#menuitems li:last-child { 
    width: 88px; 
    border-right: solid 0px transparent; 
} 

#menu-active { 
    background-image: url("../img/gradient-1.png") !important; 
    background-repeat: repeat !important; 
    border-right: solid 1px #2b6e81 !important; 
} 

#menuitems li:first-child { 
    border-left: solid 0px transparent; 
} 

#login { 
    background-image: url("../img/icon.png"); 
    background-repeat: no-repeat; 
    margin-left: 32%; 
    margin-top: 20%;  
    width: 25px; 
    height: 21px; 
} 

#menuitems a { 
    width: 140px; 
    height: 56px; 
    color: #fff; 
} 

我使用.container由作为容器引导框架。

Answer 1

您的菜单项有固定的width。这意味着他们总是保持相同的大小，如果在一条线上没有足够的空间容纳他们，他们将分割成下一行