html - 选择溢出显示表单元格父容器

Question

我想不出更好的标题了!我有一个使用 HTML div 元素的伪表结构，其中包含一个 select 输入字段:

<div class="table">
    <div class="table-cell">
        <select>
            <option>
                This is an option with a 
                really, really long value!
            </option>
            <option>
                Here is a normal value.
            </option>
            <option>
                And if this value is extremely 
                long, it stretches the parent 
                select even further!
            </option>
        </select>
    </div>
    <div class="table-cell">Cell 2</div>
    <div class="table-cell">Cell 3</div>
</div>

这是使用 CSS 的 display:table-cell 设计的，如下所示:

.table {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.table-cell {
    display: table-cell;
    padding: 1em;
    width: 33%;
    border: 1px solid #f60;
}

问题是如果 option 值太长，选择会溢出父容器。这是一个 fiddle :http://jsfiddle.net/dnBWD/1/

我可以通过删除 table-layout: fixed 来解决溢出问题，但我需要列的宽度相等，为 33%。如何在 table-cell 元素中包含选择？

~编辑~

我很抱歉，我忘了说:

我需要 select 元素始终占据单元格的整个宽度 (100%)，并且单元格是响应式的；它随着视口(viewport)延伸。

Answer 1

根据您的需要进行调整(例如，通过标签/id/类在 CSS 声明中进行外部设置):

<select style="width:150px;">

或者如果你想要一个动态宽度(参见修改后的 fiddle :http://jsfiddle.net/KV7rR/):

<select style="width:100%;">

它将强制关闭的选择列表以较小的尺寸呈现。

打开时，浏览器将显示完整的、更宽的列表。

注意: 尤其是 IE(尤其是旧版本)不会扩展拖放的选择列表内容以显示所有内容(例如，它会被剪裁)在建议任何 hack 之前，IE 的版本是什么你需要支持吗？