输入/按钮显示：表格单元格/宽度：100% 不填充表格中的剩余空间

Question

我将输入组 <div> 包装器设置为 display:table; 与所有内容 display:table-cell; 当我想在桌子上具有固定宽度时，如果我想加宽/缩短单元格以占用剩余部分例如，宽度是 <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 的解决方案。 我用 Firebug for Firefox 检查了一件事，我了解到 <button> 与具有 style="display: inline-flex" 的父级 div 可以正常工作。 您可能想对照其他浏览器检查它并有条件地使用它，或者改用浮点数。

Answer 2

我在这里有一个 JS fiddle 与所做的更改。 http://jsfiddle.net/5v3Lg50d/4/

基本上我改变了一些小东西并整理了你的小提琴。我在一个类中添加了你想要全宽的元素并向左浮动；

.fullWidth {
    width:100%;
    display:inline-block;
    float:left;
}

以下是我修改的代码：

<div class="input-group wide" style="">
    <span class="fullWidth">space</span>
    <button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
    <ul class="fullWidth"><li>o1</li><li>o2</li></ul>
    <button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
    <input  type="text" class="fullWidth"></input>
    <button>S</button>
</div>
<br />
<br />
<div class="input-group wide">
    <span><input class="fullWidth"></input></span>
    <button class="fullWidth">S</button>
</div>
<br />
<br />
<div class="input-group wide">
    <button class="fullWidth">A button</button>
    <button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
    <span><button  class="fullWidth">A button</button></span>
    <button>S</button>
</div>

希望这会有所帮助。 -Epik