html选择菜单选项运行页面

Question

如标题所述，我遇到一个问题，即我的选择菜单选项的字符长度强制选择菜单悬停在页面右侧运行。有没有解决这个问题。只是一个标准的选择元素。

<div style="position:absolute;right:30px">
 <select id="mySelectMenu" name="my select menu" style="width:150px">
    <option value="">&gt; Select Ship to Location</option>
    <option>This is an extremely long option that forces the select menu option out of the screen margin.</option>
 </select>
</div>

jsFiddle示例

http://jsfiddle.net/gchristman/GtyrQ/

我想说明网页是两列设计，选择菜单出现在右栏中。当您使用单个显示器和浏览器窗口最大化时，这将成为一个问题。字符长度超过选择菜单剩余屏幕空间的给定宽度的选项将在浏览器窗口之外消失。有没有办法改变选择菜单悬停位置永远不会超过页面的右边缘？

Answer 1

由于您使用的是绝对定位，因此您需要将right位置设置为允许菜单宽度：150px

Answer 2

可悲的是，我认为这是一个Windows /浏览器问题。我注意到它发生在IE和Firefox中，但不是Chrome。

我认为唯一的解决方案是不设置选择的宽度（删除样式=“宽度：150px”），然后它适合。但是，我意识到这可能不是最好的解决方案。