'Select' 表单元素破坏了我网站的响应式布局
'Select' form element breaks my site's responsive layout
我正在尝试使用响应式布局使我的网站适合移动设备，但表单中的 SELECT 控件破坏了它，在包含长 OPTION 项的地方超出了屏幕宽度。
处理这些表单元素的正确方法是什么？
您可以使用 max-width 来限制 <select> 的大小。给你的 selects max-width: 100%; text-overflow: ellipsis;
通常是个好主意
Max-width 会将 的大小限制为其父级的宽度，如果选项溢出，则其文本将在漂亮的浏览器中被整齐的省略号截断，而在其他浏览器中则简单地从中间截断。
点击select后，出现选项列表。该列表在标准桌面浏览器中可以更宽，但它的大小不计入正文大小，因此不会破坏您的布局。在移动设备上，这可能不会成为问题，因为移动浏览器显示选项列表的方式不同。
我正在尝试使用响应式布局使我的网站适合移动设备，但表单中的 SELECT 控件破坏了它，在包含长 OPTION 项的地方超出了屏幕宽度。
处理这些表单元素的正确方法是什么？
您可以使用 max-width 来限制 <select> 的大小。给你的 selects max-width: 100%; text-overflow: ellipsis;
Max-width 会将 的大小限制为其父级的宽度，如果选项溢出，则其文本将在漂亮的浏览器中被整齐的省略号截断，而在其他浏览器中则简单地从中间截断。
点击select后，出现选项列表。该列表在标准桌面浏览器中可以更宽，但它的大小不计入正文大小，因此不会破坏您的布局。在移动设备上，这可能不会成为问题，因为移动浏览器显示选项列表的方式不同。