样式输入元素以填充其容器的剩余宽度

Posted 2023-04-18

【中文标题】样式输入元素以填充其容器的剩余宽度

【英文标题】：Style input element to fill remaining width of its container

【发布时间】：2010-10-20 21:15:45

【问题描述】：

假设我有一个这样的 html sn-p：

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

这不是我的确切代码，但重要的是在固定宽度容器的同一行上有一个标签和一个文本输入。如何在不包装且不知道标签大小的情况下设置输入以填充容器的剩余宽度？

【问题讨论】：

我知道这个问题很久以前了，但我会添加好的解决方案，当然不会过时。

【参考方案1】：

这是一个简单而干净的解决方案，无需使用 javascript 或表格布局技巧。它类似于这个答案：Input text auto width filling 100% with other elements floating

用display:block 的span 包装输入字段很重要。接下来是按钮必须排在第一位，输入字段排在第二位。

然后您可以将按钮浮动到右侧，输入字段填充剩余空间。

form 
    width: 500px;
    overflow: hidden;
    background-color: yellow;

input 
    width: 100%;

span 
    display: block;
    overflow: hidden;
    padding-right:10px;

button 
    float: right;

<form method="post">
     <button>Search</button>
     <span><input type="text" title="Search" /></span>
</form>

一个简单的小提琴：http://jsfiddle.net/v7YTT/90/

更新 1：如果您的网站仅针对现代浏览器，我建议使用 flexible boxes。在这里你可以看到the current support。

更新 2： 这甚至适用于与输入字段完全共享的多个按钮或其他元素。这里是an example。

【讨论】：

这会改变 html，但是：你想要的项目在 html 中首先列出。

@JoelCoehoorn，没错。您是否更喜欢使用桌子而不是使用桌子是您的决定。

这很好用。使用 float:left 而不是 right 来创建 facebook 样式标记器或类似的东西。

这很好用！但是有人能解释一下这背后的逻辑吗？！

这是一个糟糕的答案。如果您只看一眼，它似乎就可以工作，但请尝试使用小提琴。它实际上是砍掉一半的输入框，但是除非您开始测试它，否则您无法分辨。目标是使输入框适合显示区域的宽度，而不是截断它。如果您尝试进行任何样式设置（圆角、边框、文本右对齐），这将完全失败。

【参考方案2】：

尽管每个人都讨厌表格的布局，但他们确实可以帮助处理类似的事情，无论是使用明确的表格标签还是使用 display:table-cell

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

【讨论】：

这可以在 IE6 上使用吗？否则我可能不得不为此实际定义一个小表:(

不确定，我会说做一个快速测试看看他们做了什么，但我无法轻松访问 IE

没关系：这让我找到了一些可行的方法。

同意，您应该与我们其他人分享您的 实际 解决方案，并将其标记为答案——事实上，这有点烦人。

你为什么要使用这个解决方案，因为还有另一个没有table-cell。看我的回答。

【参考方案3】：

我建议使用 Flexbox：

请务必添加正确的供应商前缀！

form 
  width: 400px;
  border: 1px solid black;
  display: flex;


input 
  flex: 2;


input, label 
  margin: 5px;

<form method="post">
  <label for="myInput">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input"/>
</form>

【讨论】：

这个问题很老了......这可能就是我今天的做法。如果我有机会尝试它，并且它适用于我需要的所有浏览器，我将更新接受的答案。不过，我可能还需要很长时间才能尝试这个。我现在是系统管理员团队的，不要再做那么多网络事情了。

你能提供一个使用label的例子吗？我会对如何使用border-box...

对原始问题中的 HTML 进行布局特别感兴趣

为什么是flex: 2 而不是flex: 1？

@IuliusCurt 根据文档，在这种情况下不会有所作为。 “Flex：这是 flex-grow、flex-shrink 和 flex-basis 组合的简写。第二个和第三个参数（flex-shrink 和 flex-basis）是可选的。” css-tricks.com/snippets/css/a-guide-to-flexbox

那么，flex: 42 是

【参考方案4】：

请为此使用 flexbox。你有一个容器，它将把它的孩子排成一排。第一个孩子根据需要占用它的空间。第二个弯曲以占用所有剩余空间：

<div style="display:flex;flex-direction:row">
    <label for="MyInput">label&nbsp;text</label>
    <input type="text" id="MyInput" style="flex:1" />
</div>

【讨论】：

嗨五！ :) 值得添加的一件事（在我们中的许多人仍然新近接受 flexbox 模型的情况下）：INPUT 将在一个 FORM 中，而它又可能最终出现在整个 flex 容器中（例如，与其他非表单的东西)，然后它将不再起作用——因为 flex 行为only applies to direct descendants（即子元素）。 所以，FORM 也必须是一个 flex contrainer！

flex-direction 默认已经是row，你不必指定它。

为胜利而战（再次）； 2019 年非常相关的答案

【参考方案5】：

实现这一目标的最简单方法是：

CSS：

label float: left; 

span

    display: block;
    overflow: hidden;
    padding-right: 5px;
    padding-left: 10px;


span > input width: 100%; 

HTML：

<fieldset>
    <label>label</label><span><input type="text" /></span>
    <label>longer label</label><span><input type="text" /></span>
</fieldset>

看起来像： http://jsfiddle.net/JwfRX/

【讨论】：

这对我很有效。溢出防止东西包裹，padding-right 防止右侧被切掉。

PS：对于现代浏览器，我建议使用 leishman 上面描述的 flex-box...

【参考方案6】：

非常简单的技巧是使用CSS calc 公式。所有现代浏览器、IE9、各种移动浏览器都应该支持这一点。

<div style='white-space:nowrap'>
  <span style='display:inline-block;width:80px;font-weight:bold'>
    <label for='field1'>Field1</label>
  </span>
  <input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>

【讨论】：

这假设您知道标签的确切宽度或愿意忍受额外的空间。

【参考方案7】：

你可以试试这个：

div#panel 
    border:solid;
    width:500px;
    height:300px;

div#content 
	height:90%;
	background-color:#1ea8d1; /*light blue*/

div#panel input 
	width:100%;
	height:10%;
	/*make input doesnt overflow inside div*/
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	/*make input doesnt overflow inside div*/

<div id="panel">
  <div id="content"></div>
  <input type="text" placeholder="write here..."/>
</div>

【讨论】：

今天最好的方法

【参考方案8】：

如果您使用的是 Bootstrap 4：

<form class="d-flex">
  <label for="myInput" class="align-items-center">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>

更好的是，使用 Bootstrap 的内置功能：

  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <label for="myInput" class="input-group-text">Default</label>
      </div>
      <input type="text" class="form-control" id="myInput">
    </div>
  </form>

https://jsfiddle.net/nap1ykbr/

【讨论】：

确实，不用再碰CSS了