我有一个响应式网站设计，其中大多数工作正常。
在结帐页面上，我有一个选择元素用于所选国家/地区。一些选择很长，例如“刚果民主共和国”。这会将布局推向右侧，打破布局并使布局滚动水平 - 这太可怕了;）
如果我完全删除了选择，则布局显示正常。如果我删除所有选项并在其位置放置短测试，它也可以正常工作。所以我很确定它的长 Option 是问题所在。选择本身只有50％宽，因此不会在屏幕上运行 - 它是'隐形'选项元素。
以下是临时链接：http://moymadethis.com/oca/test.html
在桌面上工作正常，问题出在iphone mobile（safari，chrome和opera）上。
谢谢，希望有人可以为此解决问题？ 史蒂夫
答案 0 :(得分：1)
通常，在select元素本身上设置宽度就足够了（与其父元素的设置宽度相反 - 如果需要，内部元素将默认溢出），例如。
select { width: 6em; }
当菜单打开时（元素聚焦时），选项将以其上下文所需的宽度显示，但这将显示在页面内容顶部的“图层”中，因此不应打扰布局。
如果问题仍然存在，请发布最少的HTML和CSS代码以重现问题并识别测试的平台和浏览器。
答案 1 :(得分：0)
我最近在我正在进行的项目上遇到了完全相同的问题。我发现解决方案是在选择宽度上使用！important，在我的情况下是100％。这使得该解决方案可以在移动设备和桌面设备上完美运行。
答案 2 :(得分：0)
尝试在select元素上使用max-width
例如#myselect {max-width:95%;}