如何扩大输入，以占用格的剩余空间

我想创建一个下拉式下拉式自定义面板（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元素一样，其中文本部分始终填充右侧下拉图标/按钮未占用的所有空间。

来源

2017-10-11 ProfK

我有一些麻烦，完全理解你的问题，但通常可以设置一个绝对定位下拉（无论列表或格）在一个相对定位的父。 – Aer0

只需给按钮一个固定的宽度，比如'200px'，输入宽度的其余部分：'calc（100％ - 200px）'给出或占用空白的几个像素。 –

你能发表一个你想要达到什么的例子吗？ – Terry

下面的例子会帮助你。让我知道，如果你不想固定宽度的图标，所以我会相应地更新此代码。

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

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

来源

2017-10-12 11:16:52

正是我所需要的，比第一个正确答案更整齐。谢谢。 – ProfK

为什么'container'的选择器必须是id而不是类？我试图编写一个可重用的视图组件，因此我宁愿不使用任何ID，因为谁知道在哪里使用其他ID。 – ProfK

啊，我看到它只有在你使用单个单词“容器”的情况下。如果我将其更改为更多本地和未知名称，则可以改为使用类。例如。 '.folder-selector'而不是'＃容器'似乎工作正常。 – ProfK

-1

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

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

<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>

来源

2017-10-11 07:57:44 sajee

为什么这个答案被否决？它似乎回答我的问题。 – ProfK

谢谢。我给了你一点，但接受的答案是整洁。谢谢。 – ProfK

<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>

你真的没有，只要你知道它在运行时的宽度来设置按钮的宽度。

来源

2017-10-12 08:46:51 Cons7an7ine

我得到一个输入的整个屏幕的宽度，并在最左边的一个按钮下面。它看起来像样式中的'calc'不起作用。我在一个ASP.NET Core MVC项目中使用了这个，标准的'_Layout.cshtml'作为我的'主'页面。 – ProfK

1.你使用什么浏览器？ 2.你减去了按钮的确切宽度吗？如果没有，按钮将按照您的说法左下。 3。你删除了空格吗？（参考上面的html注释）。尝试调整为'calc（80％ - 16px）'来确定问题是否出现在'calc'或其他内容中。 – Cons7an7ine

1）铬，2）是，3）否。无论如何它现在工作，但我仍然会尝试使这个版本工作，因为'calc'对我来说是新的，我希望看到它的工作。 – ProfK

如何扩大输入，以占用格的剩余空间

回答

相关问题