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

我在这里做了一个JS小提琴。 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

Answer 2

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

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

2 个答案: