input/button 显示:table-cell/width:100% 不填 space in table

Question

我正在将输入组 <div> 包装器样式化为 display:table; 并包含所有内容 display:table-cell; 当我想在 table 上具有固定宽度时，如果我想 widen/shorten 占用剩余宽度的单元格是 <span> 元素或 <ul> 元素，例如，然后设置 width:100%; 有效。但是，如果元素是 <input> 或 <button> 那么这在 firefox 或 chrome 中不起作用（但在 IE 中有效）并且结果是元素占据了整个 space 输入组，将下一个元素向下推到新行。我可以通过将 <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 fiddle，其中进行了更改。 http://jsfiddle.net/5v3Lg50d/4/

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

.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

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

input/button 显示:table-cell/width:100% 不填 space in table

input/button display:table-cell/width:100% do not fill remaining space in table

html

css

input

button