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>

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

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

Answer 1

<style>
.dropdown-button {
    width: 16px;  /*Set width of button*/
}

.folder-selection {
    width: calc(100% - 16px); /*div's width minus button's width*/
}
</style>

<div id=container>
    <input type="text" class="folder-selection" /><!-- this comment is to remove white space between the two elements
--><button type="button" class="dropdown-button">...</button>
</div>

只要您知道它在运行时的宽度，就不必设置按钮的宽度。

Answer 2

以下示例将为您提供帮助。请注意，如果您不想要右边的固定宽度图标，那么我会相应地更新此代码。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

此代码将帮助您按预期定位元素。

＆＃13;

* {
  box-sizing: border-box;
}

.dropdown-container {
  width: 500px;
  display: table;
  background: orange;
}

.dropdown-container .input-container {
  display: table-cell;
}

.dropdown-container .input-container input {
  width: 100%;
  padding-right: 10px;
}

.dropdown-container .button-container {
  display: table-cell;
  width: 150px;
}

.dropdown-container .button-container button {
  width: 100%;
}

＆＃13;

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

＆＃13;

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

3 个答案: