水平到垂直菜单，在浏览器窗口大小调整

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规则，它被裁剪浏览器窗口的宽度不同。