我有一个响应式网站设计,其中大部分工作正常。
虽然我在结帐页面上有一个用于选定国家/地区的选择 元素。有些选项很长,例如“刚果民主共和国”。这会将布局向右推,破坏布局并使布局水平滚动 - 这太可怕了;)
如果我完全删除选择,布局显示正常。如果我删除所有选项并将简短测试放在它们的位置,它也可以正常工作。所以我很确定它的长 Option 是问题所在。 Select 本身只有 50% 宽,因此它不会超出屏幕 - 它是“不可见”选项元素。
这是一个临时链接:http://moymadethis.com/oca/test.html
在桌面上工作正常,问题出在 iphone 移动设备上(safari、chrome 和 opera)。
谢谢,希望有人能阐明解决方案吗? 史蒂夫
最佳答案
通常在 select
元素本身上设置宽度就足够了(与其在其父元素上设置宽度相反——如果需要,内部元素默认会溢出),例如
select { width: 6em; }
当菜单打开时(当元素获得焦点时),选项将以其上下文所需的宽度出现,但这将出现在页面内容顶部的“层”中,因此不应干扰布局。
如果问题仍然存在,请发布最少的 HTML 和 CSS 代码以重现问题并确定测试的平台和浏览器。
关于iphone - SELECT 中的 OPTION 元素太长且破坏了移动布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14579650/