在寬度變化時重新定位DIV菜單項

假設我的網頁頂部有一個菜單欄。在寬度變化時重新定位DIV菜單項

每個菜單項都在它自己的DIV中，並且這些菜單項水平放置，每個菜單項DIV並排排列。

現在，當您縮小瀏覽器的寬度時，瀏覽器寬度將小於此菜單欄的寬度。

我想要做的是在發生這種情況時讓最後一個菜單項（DIV）向下移動到下一行，並且每個連續的最後一個菜單項的功能與瀏覽器的寬度繼續縮小相同，直到所有的菜單項從上到下堆積爲止。

我不知道如何使用CSS來做到這一點。

有什麼建議嗎？

謝謝。

來源

2013-06-12 user2456566

到目前爲止你有什麼？ – Artemix

菜單項需要填充菜單的整個寬度嗎？或者他們是一個靜態寬度？你可以漂浮在菜單div中的菜單項。 –

我到目前爲止是菜單項的UL列表。菜單項不需要填滿整個寬度。只有5個項目，最好推到窗口的右側（因爲徽標將在左側）。但是，隨着瀏覽器寬度的縮小，菜單的末尾需要下降，直到它變得很窄以至於它們都是垂直的。 – user2456566

HTML：

<div id="container"> 
     <ul> 
      <li> 
       Menu1 
      </li> 
      <li> 
       Menu2 
      </li> 
      <li> 
       Menu3 
      </li> 
      <li> 
       Menu4 
      </li> 
      <li> 
       Menu5 
      </li>   
     </ul> 
    </div>

CSS：

#container{ 
    width:100%; 
    min-width:200px; 
    background-color:green; 
} 

#container ul li{ 
    width:50px; 
    height:22px; 
    background-color:red; 
    border:1px solid black; 
    list-style:none; 
    text-align:center; 
    display:inline-block; 
}

演示：

http://jsfiddle.net/jU44m/

來源

2013-06-12 13:55:29 Syd

感謝PGR - 一旦我將最小寬度從200更改爲100，它就像一個魅力！非常感謝你。 – user2456566

要完成此操作，所有菜單項應該位於一個較大的div中，並且要在調整頁面大小時調整此div的大小，請將其寬度值設置爲百分比。設置這個高度值div來自動使之擴大，當物品掉落（大小可以用填充完成）這樣的：

#menu { 
    width: 50%; 
    height: auto; 
}

來源

2013-06-12 13:50:10 Optox

在寬度變化時重新定位DIV菜單項

回答

相關問題