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

不要提供作为按钮的按钮或输入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/