如何使文本输入框占据父块内的所有剩余宽度？

Posted 2023-02-18

【中文标题】如何使文本输入框占据父块内的所有剩余宽度？

【英文标题】：How to make text input box to occupy all the remaining width within parent block?

【发布时间】：2011-08-15 02:44:59

【问题描述】：

如何实现以下目标：

┌────────────────────parent────────────────────┐
│ label [text-box                   ] [button] │
│ paragraph                                    │
└──────────────────────────────────────────────┘

label 左对齐 button 右对齐 text-box 占据父级内所有剩余宽度 paragraph 左对齐，也必须与label 左对齐

label 和button 都应尽可能遵守其他地方定义的字体属性。 parent 在窗口内居中对齐，自然可以有任意宽度。

请指教。

【参考方案1】：

更新 [2016 年 10 月]：Flexbox 版本...

form 
  display: flex;

form input[type="text"] 
  flex: 1;

<form>
  <label>Name</label>
  <input type="text" />
  <button>Submit</button>
</form>
<p>Lorem ipsum...</p>

原始答案 [2011 年 4 月]：无表 CSS 版本（表行为）...

<div id="parent">
    <div id="inner">
        <label>Name</label>
        <span><input id="text" type="text" /></span>
        <input id="submit" type="button" value="Submit" />
    </div>
    <p>some paragraph text</p>
</div>

CSS...

#inner 
    display: table;
    width: 100%;

label 
    display: table-cell;

span 
    display: table-cell;
    width: 100%;
    padding: 0px 10px;

#text 
    width: 100%;

#submit 
    display: table-cell;

演示：http://jsfiddle.net/wdm954/626B2/4/

【讨论】：

在父块给出极端宽度之前看起来不错。拉伸一下，标签文字和文字输入框之间会出现一个大洞。压缩它，带有标签和按钮节点的文本将折叠。这是我正在努力解决的问题的本质。

酷，谢谢，现在它完全独立于父母的宽度

是的，它很酷，但在 IE7 中不起作用，因为它不支持 display: table-cell;

这是在 IE7 中工作的解决方案：***.com/questions/5219175/width-100-padding

【参考方案2】：

我不喜欢首先回答实际使用表格单元格的“无表格”版本。也不是使用实际表格的第二个答案。也不是使用硬编码宽度的第三个答案。这是使用 flex 的解决方案。这是迄今为止最简单的：

#parent 
  display: flex;

input 
  flex: 1;

<div id="parent">
  <label>Name</label>
  <input type="text" />
  <button>Button</button>
</div>
<div>paragraph</div>

【讨论】：

请注意，flex 在 android 4.2 浏览器中不起作用，因此不允许构建跨平台 Cordova 应用程序。 Flex 简化了很多事情，我非常喜欢它，但为了兼容一两年，我们不得不改用浮点数。

【参考方案3】：

使用表格。 :D 我知道人们往往讨厌桌子，但他们会在这种情况下工作......

<div id="parent">
    <table style="width:100%">
        <tr>
            <td>label</td>
            <td style="width:100%">
                <input type="text" style="width:100%">
            </td>
            <td>
                <button>clickme</button>
            </td>
        </tr>
    </table>
</div>

【讨论】：

现在我很好奇它是如何工作的，因为它确实（没有预定义的宽度，甚至百分比）

因为表格单元格的定义是一直持续下去，直到碰到下一个单元格或行或表格的末尾。您不必指定它。

让一切尽可能简单，但不是更简单，爱因斯坦说。这是您的表格解决方案的一个论据。奥卡姆也会同意，并摒弃了喋喋不休的 div 解决方案。有些人相信处女分娩，其他人则不使用桌子。要有信心。必须的。

当您将按钮 before 放在输入框并将float: right 分配给它并使用display: block 和overflow: hidden 将输入框包装在跨度内时，它可以在没有表格的情况下工作.不涉及魔法：<div style="width:100%"><button style="float:right">clickme 2</button><button style="float:right">clickme 1</button><label style="float:left">label</label><span style="display:block;overflow:hidden"><input type="text" style="width:100%"/></span></div>。以相反的顺序指定所有右侧按钮的基本思想。

【参考方案4】：

我知道如何实现这个或类似的唯一方法是将“文本框”作为一个块元素，它会自动填充父元素的整个宽度，然后向左右应用填充等于左右容器的总宽度。然后将“标签”和“按钮”元素的位置设置为 relative 并将它们浮动到需要的位置（浮动：左，浮动：右）。

类似的，

html：

<div id="parent">
    <div id="label">label</div>
    <div id="button">button</div>
    <div id="text-box">
        text<br />
        text<br />
        text<br />
        text<br />
        text
    </div>
</div>

CSS：

div#label

    position: relative;
    float: left;
    width: 200px;
    background: #F00;


div#button

    position: relative;
    float: right;
    width: 120px;
    background: #0F0;


div#text-box

    padding-left: 200px;
    padding-right: 120px;
    background: #00F;

如果按钮和标签元素不需要设置宽度，则所有元素都可以将其宽度设置为百分比值（全部加起来为 100%）。

【讨论】：

不幸的是按钮块浮动 above 文本框块，重叠其内容（尝试：不透明度：0.75）。另外，请查看我对 wdm 关于百分比宽度脆弱性的回答的评论。

您可以通过为主体设置最小宽度来避免左右元素的折叠 - 我不确定标签文本和文本输入之间的洞是什么意思 - 我的解决方案确保文本框的内容总是对齐到输入元素的右侧。

标签和按钮元素都与文本框区域重叠。但是由于应用了填充，这个区域内的内容永远不会在后面或下面。

当您将按钮 before 放在输入框并将float: right 分配给它并使用display: block 和overflow: hidden 将输入框包装在跨度内时，它可以在没有表格的情况下工作.不涉及魔法：<div style="width:100%"><button style="float:right">clickme 2</button><button style="float:right">clickme 1</button><label style="float:left">label</label><span style="display:block;overflow:hidden"><input type="text" style="width:100%"/></span></div>。以相反的顺序指定所有右侧按钮的基本思想。

【参考方案5】：

别忘了，你可以使用calc()。假设label和button使用的总宽度为100px（包括边距），那么宽度为：

.text-box     
  width: calc(100% - 100px);

如果你认为它不支持很多浏览器，那你就错了。现在支持很多。时代变了

【讨论】：

哇！看起来这在很早以前就得到了支持，即使是 IE9。我很惊讶我没有看到更多。

【参考方案6】：

如果分配 float: right 并将按钮（或几个按钮以相反的顺序）在输入之前，它可以在没有 flex 和表格的情况下工作盒子。

然后用float: left放置标签，给输入框100%宽度并用将其包裹在一个span内display: block 和 overflow: hidden。

不涉及魔法：

<div style="width:100%">
  <button style="float:right">clickme 2</button>
  <button style="float:right">clickme 1</button>
  <label style="float:left">label</label>
  <span style="display:block;overflow:hidden">
    <input type="text" style="width:100%"/>
  </span>
</div>

所有右侧按钮倒序指定在输入框之前的基本思想。

【讨论】：

对于那些需要标签来传递点击和点击到输入框并包裹它的人，padding-right: 100%和margin-right: -100%是这种情况下唯一的解决方案。但是会发现它绘制的按钮不可点击。我喜欢***.com/a/4408709/84661 的建议。完整的解决方案在这里：codepen.io/avesus/pen/VpaPWK