如何制作可变宽度输入字段答案

【问题标题】：How do make a variable-width input field如何制作可变宽度输入字段
【发布时间】：2020-04-24 01:07:50
【问题描述】：

我正在尝试使标签和输入字段出现在同一行，并带有一个可变宽度的输入字段，该字段将根据可用空间进行扩展

<div class="clearfix">
    <aside>foo</aside>
    <span><input type="text" value="Enter text" /></span>
</div>

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

div {
    border: 1px solid red;
}

aside {
    display: block;
    width: 100px;
    background: #eee;
    float: left;
}

span {
    display: block;
    width: 100%;
    background: #ccc;
}

input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #000;
}

它适用于跨度，但是当我添加输入时它会换行到下一行。

【问题讨论】：

你可以使用display: table-*: jsfiddle.net/userdude/WcQ6J/4

标签： html css

【解决方案1】：

这里有一些古怪的解决方案。老实说，我真的不明白为什么会这样。我把它放在一个旧的代码笔里。祝你好运！

http://jsfiddle.net/sheriffderek/DD73r/

HTML

<div class="container">

  <div class="label-w">
    <label for="your-input">your label</label>
  </div>

  <div class="input-w">
    <input name="your-input" placeholder="your stuff" />
  </div>

</div> <!-- .container -->

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.container {
  width: 100%;
  float: left;
  height: 2em;
}

.label-w {
  width: 8em;
  height: 100%;
  float: left;
  border: 1px solid red;
  line-height: 2em;
}

.input-w {
  float: none; /* key */
  width: auto; /* key */
  height: 100%;
  overflow: hidden; /* key */
  border: 1px solid orange;
}

.input-w input {
  width: 100%;
  height: 100%;
}

【讨论】：

文本缩进和关于缩进大小的绝对定位标签怎么样？
这里的关键是将overflow: hidden 添加到输入包装器中。不确定会产生什么副作用，但目前有效。
您应该尝试对其进行微清除修复，看看它是否起作用。
溢出：隐藏技巧会产生副作用，即您无法控制输入字段的边框。例如，永远不会显示最右边的边框。尝试在输入字段中添加边距，您会看到会发生什么。

【解决方案2】：

您可以使用 CSS calc 属性来确定宽度减去边框和侧边宽度：

input {
  width: calc(100% - 102px); /* 100% minus (aside width (100px) + border width (2px)) */
  box-sizing: border-box;
  border: 1px solid #000;
}

FIDDLE

【讨论】：

【解决方案3】：

你可以使用display: table-*:

div {
    display: table;
    width: 100%;
    background-color: #ccc;
}
aside {
    display: table-cell;
    width: 100px;
    background: #eee;
}
span {
    display: table-cell;
    background: #bbb;
}
input {
    display: block;
    width: 100%;
    background-color: #ddd;
}

http://jsfiddle.net/userdude/WcQ6J/5/

这比 IE8 不支持的 display: inline-block 更兼容（和灵活）。

【讨论】：

【解决方案4】：

您可以将“旁边”的宽度设置为像素，将跨度设置为百分比，但是，正如您所见，这会导致问题。将两者都设置为百分比更容易。此外，“inline-block”将使您的元素对齐。你可以使用这个或“float:right;”，但我更喜欢设置显示。

aside {
    display: inline-block;
    width: 9%;
}

span {
    display: inline-block;
    width: 90%;
}

见jsfiddle。

【讨论】：

【解决方案5】：

如果您想要一个真正可变宽度的输入字段，以便您可以手动调整其宽度以填充整个页面或任何其他方便的宽度，为什么不让该输入元素填充 100% 的可调整大小的 div？

CSS：

<style>
   div.resize {
      width: 300px; /*initial width*/
      resize: horizontal;
      overflow: auto;
   }

HTML：

<div class="resize">
   <input style="width: 100%" />

拖动调整div大小的小三角形会出现在输入元素的右下角！

【讨论】：