html - 输入/按钮显示 :table-cell/width:100% do not fill remaining space in table

Question

我正在设计一个输入组 <div>包装为 display:table;所有内容 display:table-cell;当我想在 table 上有一个固定的宽度时，如果我想加宽/缩短以占用剩余宽度的单元格是 <span>元素或 <ul>元素，例如，然后设置 width:100%;作品。但是，如果元素是 <input>或 <button>那么这在 firefox 或 chrome 中不起作用(但在 IE 中起作用)，结果是该元素占据了输入组的整个空间，将下一个元素向下推到新行。我可以通过放置 <input> 来解决这个问题或 <button>在 <span> 里面元素和设置 width:100%;在两者上，但我宁愿有一个 css 解决方案。

<div class="input-group wide">
    <input  type="text" style="width:100%;"></input>
    <button>S</button>
</div>

CSS:

.input-group {
    display:inline-table;
    padding:0px;
    background-color: grey;
}
.input-group > input, .input-group > button, .input-group > span, .input-group > ul {
    display: table-cell;
    margin:0px;
}
.wide {
    width: 260px;
}

http://jsfiddle.net/5v3Lg50d/3/

Answer 1

花车是个好主意，你可以按照 Epik 的解决方案。 我用 Firefox 的 Firebug 检查了一件事，我了解到 <button>与其 parent 一起工作正常 div有style="display: inline-flex" . 您可能想针对其他浏览器进行检查并有条件地使用它，或者改用 float 。