根据提交按钮宽度自动调整输入宽度

Question

<form>
    <input type="text" />
    <button>this text can be changed</button>    
</form>

目前我有一些像这样的代码，问题是按钮内的文本可以根据内容进行更改，所以我希望按钮和输入栏可以相互动态地改变宽度。 基本上：按钮宽度基于文本长度，输入条宽度基于按钮宽度。并且表格的整个宽度是固定的，应该用按钮和输入栏填充。

也比JS更喜欢css解决方案。 有人可以给我一些帮助吗？ 谢谢

Answer 1

简单的JavaScript Fiddle Demo

使用Css

word-wrap: break-word;

＆＃13;

＆＃13;

form {
  display: inline-flex;
}

input,
button {
  width: 50%;
  word-wrap: break-word;
  box-sizing: border-box;
}

＆＃13;

<form>
  <input type="text" />
  <button>increase text and see the width of input, button</button>
</form>

＆＃13;

＆＃13;

＆＃13;