“选择”表单元素破坏了我网站的响应式布局

Question

我正在尝试使用响应式布局使我的网站适合移动设备，但表单中的 SELECT 控件会破坏它，超出屏幕宽度，只要它们包含长 OPTION 项。

处理这些表单元素的正确方法是什么？

Answer 1

您可以使用max-width 来限制<select> 的大小。提供您的选择通常是个好主意max-width: 100%; text-overflow: ellipsis;

Max-width 会将大小限制为其父级的宽度，如果选项溢出，则其文本将在漂亮的浏览器中被整齐的省略号截断，而在其他浏览器中则简单地从中间剪切。

点击选择后，出现选项列表。该列表在标准桌面浏览器中可以更宽，但它的大小不计入正文大小，因此它不会破坏您的布局。在移动设备上，这可能不会有问题，因为移动浏览器显示选项列表的方式不同。

见http://codepen.io/anon/pen/VLLvVV