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

假设我有以下html格式的列表：

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

这看起来像这样：

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

不过，我所追求的理想行为是：

---

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

您需要研究CSS3媒体查询/响应式web设计。谷歌上的大量搜索结果等等，但这里有很多

---

当屏幕宽度足够小时，可以使用CSS3媒体查询来删除float:left

---

如果调整页面大小，您可以在CSS中为ul元素设置宽度或最小宽度属性，以防止其被裁剪。

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

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

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