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

Question

说我在html中有以下列表：

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

其风格如下：

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

这看起来像这样：

当我调整浏览器窗口的大小，并且边框接触到最后一个li的边缘时，此元素会按预期跳转：

尽管如此，我追求的理想行为是这样的：

当浏览器边框触摸最后一个元素时，整个菜单将变为垂直。我的问题是如何用CSS做到这一点？

Answer 1

您需要研究CSS3媒体查询/响应式网页设计。谷歌和SO上的结果很多，但这里是one。

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

Answer 2

你可以通过CSS3媒体查询删除浮动：当屏幕宽度足够小时左移。

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

Answer 3

您可以在CSS中为ul元素设置width或min-width属性，以防止在调整页面大小时裁剪它

Answer 4

使用CSS3媒体查询并为浏览器窗口的不同宽度指定不同的css规则。