css - 使输入占用所有剩余空间

Question

我的问题与此问题相似，但有所不同。

我有一个未知宽度的表格单元格。此单元格包含一个input和一个span。span应该与内容需要一样宽，并且应该input占用所有剩余空间。

我为这个看似微不足道的问题创建了一个微不足道的问题。随机文本应该在最右边，输入应该根据需要增长或缩小以填充黄色td。

score 1 · Accepted Answer

这可以通过 Flexbox 实现。

HTML：

<td class="foo">
    <input class="foo__input">
    <span>dsflkwej</span>                
</td>

CSS：

.foo {
    display: flex
}
.foo__input {
    flex-grow: 1
}

现场演示：http: //jsfiddle.net/simevidas/MhR77/

（使用 Autoprefixer 为 Flexbox 属性添加供应商前缀。）

score 1 · Accepted Answer

尝试将黄色拆分<td>为自己的表格（或使用其他元素display: table-cell等）。

将包含输入的单元格的宽度设置为 100%，并将表格的最大宽度设置为 100%。

当文本更改时，这将导致单元格内的表格重新流动。

2 回答 2