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。這意味着他們總是保持相同的大小，如果在一條線上沒有足夠的空間容納他們，他們將分割成下一行