根据同级文本更改输入的大小

【问题标题】：change size of input based on sibling text根据同级文本更改输入的大小
【发布时间】：2017-09-28 12:32:48
【问题描述】：

我有一个input 元素，后面有一些文字。例如：

<input type="email" required/> simple   text

我需要根据文本大小更改input 的宽度。如果文本更多，则输入的宽度应该缩小。

这对于旧版浏览器是否可以使用 flex 或 CSS？此外，输入的宽度仅取决于它旁边的文本，而不是它自己的值。

【问题讨论】：

我认为它会起作用，但也许可以用 flexboxes 制作？
看这里：stackoverflow.com/questions/30520858/…
我不会根据您输入的内容神奇地扩展输入。只需要弹性输入取决于它附近的文本块。我编辑了问题以使其清楚。
如果不将文本包装在一个元素中，我不会怀疑。

标签： html css flexbox

【解决方案1】：

查看sn-p。希望这是您正在寻找的。我将您的文本内容包装在一个跨度中。不包裹是无法达到想要的效果的。

对文本项使用flex-shrinknone，对文本项使用min-width: 0 输入框为了让每个项目都留在容器内作为弹性项目的初始设置是min-width: auto。

.wrapper{
  display: flex;
  display: -webkit-flex;
  margin: 20px 0;
  background: #ddd;
  padding: 10px;
  width: 200px;
}
span{
  flex-shrink: 0;
}
input {
  min-width: 0;
}

<div class="wrapper col-md">
  <input type="email" required/> <span>simple text is</span>
</div>

<div class="wrapper col-md">
  <input type="email" required/> <span>simple text is another text</span>
</div>

【讨论】：