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值太长，select会溢出父容器。这是一个小提琴：http://jsfiddle.net/dnBWD/1/

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

〜编辑

我谦卑地道歉，我忘了提及：

我需要select元素始终占据单元格的整个宽度（100％），并且单元格是响应的;它随着视口延伸。

Answer 1

根据您的需要进行调整（例如，通过tag / id / class在CSS声明中设置外部）：

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

或者如果你想要一个动态宽度（见修改过的小提琴：http://jsfiddle.net/KV7rR/）：

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

它会强制关闭的选择列表以较小的尺寸渲染。

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

注意：特别是IE（特别是旧版本）不会扩展删除的选择列表内容以显示所有内容（例如它会被剪辑）在建议任何黑客之前，IE的版本是什么你需要支持吗？

Answer 2

顺便提一下，对此的解决方案非常简单，只需要在select元素中添加max-width即可。以下是工作代码：http://jsfiddle.net/KV7rR/1/

谢谢大家。

〜编辑

max-width无法在所有浏览器中使用，发现width是正确的解决方案;感谢上面的答案。

选择Spill Over Display Table Cell Parent Container

2 个答案: