水平到垂直菜單，在瀏覽器窗口大小調整

Question

說我有在HTML以下列表：

<ul> 
    <li>Program</li> 
    <li>Platser</li> 
    <li>System</li> 
</ul> 

這是樣式如下：

li 
{  
    float: left; 
    padding: 10px; 
} 

這看起來是這樣的：

當我調整瀏覽器窗口的大小，並且邊框觸及e最後李DGE，這個元素跳下來預期：

雖然，所期望的行爲，我以後會是這樣的：

當最後一個元素被觸摸通過瀏覽器邊框，整個菜單變得垂直。我的問題是如何用CSS做到這一點？

Answer 1

您需要查看CSS3媒體查詢/響應式網頁設計。谷歌和SO的結果噸，但這裏的one。

@media screen and (max-width: 200px) { 
// do something here, change the behavior of your list 
} 

Answer 2

您可以通過CSS3媒體查詢來移除float：left當屏幕寬度足夠小時。

https://developer.mozilla.org/en/CSS/Media_queries

Answer 3

可以設置在CSS的寬度或最小寬度屬性的UI元素，以防止，如果你調整頁面

Answer 4

使用CSS3媒體查詢，並指定不同的CSS規則，它被裁剪瀏覽器窗口的寬度不同。