Html 用右边的按钮在div中输入剩余可用空间的文本

有没有一种简单而优雅的方法可以让输入在右边有一个按钮的div中保留可用空间，而无需在输入按钮上指定任何宽度

<div>
    <input type="text"/>
    <button>button</button>
</div>

按钮

这似乎很容易，但我找不到一个方法来做

---

这里的jsiddle:

可以使用显示表/表格单元格。这不是基于表格的布局，所以人们不会对此大惊小怪。将div设置为显示为表，然后使用直接子代选择器

*

使所有直接子代充当单元格。然后您可以指定单元格的宽度，它们将尽最大努力占据整个宽度。我必须把按钮包起来，否则它会收缩

按钮
div{
边框：1px实心#000；
显示：表格；
宽度：100%；
}
div>*{显示：表格单元格；}
div>span{width:1%；}
div>输入{宽度：100%；}

我不确定是否正确理解了您的问题，但您是否可以尝试输入按钮{float:left；}通过在周围的div上添加边框，您可能会看到问题：我希望输入的宽度取其父级的可用空间。请尝试以下操作：如果我正确理解了您的que，您是否希望nope输入和按钮位于同一行，按钮没有设置宽度，以及输入具有自动宽度。

<div>
    <input type="text"/>
    <span><button>button</button></span>
</div>

div {
    border: 1px solid #000;
    display: table;
    width: 100%;
}

div > * { display: table-cell; }

div > span { width: 1%;  }
div > input { width: 100%; }