html - 在右侧带有按钮的 div 中输入剩余可用空间的文本

Question

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

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

这看起来很简单，但我找不到方法......

这里是 jsfiddle:http://jsfiddle.net/LLQQQ/

Answer 1

您可以使用显示表格/表格单元格。这不是基于表格的布局，所以人们不会对此大惊小怪。您将 div 设置为显示为表格，然后使用直接后代选择器 > * 使所有直接子代充当单元格。然后你可以在单元格上指定宽度，它们会尽力占据整个宽度。我不得不将按钮包裹在 span 中，否则它会缩小。

http://jsfiddle.net/LLQQQ/6/

<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%; }