html - 选项元素大于选择框 - 如何让选项列表向左扩展？

Question

我目前面临的问题真的很难描述，但也许你可以从下面的截图中得到启发。该设置是一个选择框(通过 css 限制宽度)和内部的一些选项元素。如果一个选项的宽度大于选择框的宽度，则整个内容默认呈现如下:

这就是我希望它显示的方式(红色框是选项):

知道如何实现吗？

编辑:这是我正在使用的标记的 fiddle :http://jsfiddle.net/dCmZ2/

Answer 1

您无法控制浏览器对选择框的呈现。想想像 iPhone 这样的移动设备。这里的选择列表占据了手机屏幕的一半，并且是自定义呈现的。如果您想要这种级别的控制，那么您将需要滚动您自己的自定义选择框。

div:hover ul { display: block; }
div ul { /* custom css for placement */ }
<div>
   <ul><li>1</li><li>1</li></ul>
</div>