css - 显示 : table-cell is not behaving like an actual table

Question

我正在尝试构建 Bootstrap 新的“输入组”。他们将表格单元格用于输入字段及其标签/按钮，以便它们一起占据 100% 的宽度。

.outer {
    border: 1px solid #ccc;
    display: table;
    width: 100%;
}

button, input {
    border: 0;
    display: table-cell;   
}

input {
    width: 100%;
    border: 1px solid green;
}

但遗憾的是，按钮换行，或者 - 如果使用 white-space: nowrap，它位于 .outer-div 之外。

这里有一个 JSfiddle 可以处理表格，但不能处理其他应该充当表格的元素: http://jsfiddle.net/t34Au/1/

这是 bootstrap 3 中的部分 http://getbootstrap.com/components/#input-groups

我不明白我在这里做错了什么。感谢您的帮助。

Answer 1

不要给 button 或作为按钮的 input display: table-cell。

它实际上不起作用。

如果您阅读 http://getbootstrap.com/components/#input-groups-buttons它指出:

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

这里有一个演示，展示了如何在没有 Bootstrap 的情况下执行此操作，如果您需要的话:http://jsfiddle.net/thirtydot/t34Au/3/

这使用与 Bootstrap 相同的基本方法。

这是一个演示，我从 Bootstrap 演示中复制了 HTML 并导入了 Bootstrap:http://jsfiddle.net/thirtydot/2cGaG/