html - 如何扩展输入以占用 div 中的剩余空间

Question

我想创建一个下拉菜单，用于下拉自定义面板 (div) 而不是选项列表。该面板无关紧要，因为它与我询问的布局无关。对于基本的下拉外观，我有以下内容:

<style>
    .folder-selection {
        width: 100%;
    }
    .dropdown-button {
        float: right;
    }
</style>

    <div id=container>
        <input type="text" class="folder-selection" />
        <button type="button" class="dropdown-button">...</button>
    </div>

现在我知道 float 和宽度 100% 是不对的，但我有一个容器 div，左边有一个输入，右边有一个按钮。该按钮必须保持固定在输入的右侧。如果容器很窄，则输入必须很窄，反之亦然，但我想在设计时不知道容器宽度的情况下实现这一点。

容器应适合任何宽度，输入的宽度应相应调整。就像普通的 select 元素一样，文本部分始终填充其右侧的下拉图标/按钮未占用的所有空间。

Answer 1

下面的例子会帮助你。让我知道，如果您不想在右侧显示固定宽度的图标，那么我会相应地更新此代码。

#container {
	position: relative;
	border: 1px solid #ccc;
	padding: 5px 40px 5px 5px;
	margin: 0 0 10px;
}
.folder-selection {
	width: 100%;
	padding: 5px;
	border: none;
	box-sizing: border-box;
	height: 30px;
}
.dropdown-button {
	position: absolute;
	top: 5px;
	right: 5px;
	height: 30px;
}

<div id=container>
 <input type="text" class="folder-selection" />
 <button type="button" class="dropdown-button">...</button>
</div>