分辨率兼容 - HTML

Question

我的導航菜單中存在此問題，當我更改屏幕分辨率時，菜單會全部搞砸。這是我在jsfiddle中的代碼：http://jsfiddle.net/qh5u47t2/。幫助將不勝感激。謝謝。

<div id="topMenuDiv" style="background-color: gray; height: 20%; width:99%; margin: 0 0 -2px 0; position: absolute; top: 0px; border: 1px solid red;"> 
    <div class="navigation" style="height:100%; width:100%;"> 
     <ul class="menu"> 

這些是我的菜單主​​HTML代碼和CSS是：

.navigation { 
    float: right; 
    margin: 0 auto; 
} 

ul.menu { 
    margin: 0 0 0 0; 
    padding: 0; 
    position: absolute; 
    top: 65%; 
    left: 20%; 
    list-style: none; 
} 

Answer 1

我試着重新調整您的jsfiddle，而且在我看來，你的代碼是不是在響應一種方法是，如果在頂部窗口（可視區域）上分配的空間不夠，則不會重新排列內容以顯示所有內容。 Bootstrap Grid系統將幫助您完成工作，包括立即處理各種屏幕分辨率。 以我的經驗值得學習。 幾個環節，讓你開始：http://getbootstrap.com/css/#grid（網格系統） 你可以看到一些模板這裏：http://getbootstrap.com/getting-started/#examples

希望它可以幫助