根据提交按钮宽度自动调整输入宽度
问题描述:
<form>
<input type="text" />
<button>this text can be changed</button>
</form>
目前我有这样的一些代码,问题是可以根据内容改变按钮内的文字,所以我想要的按钮和输入栏可以动态改变宽度基于彼此。 基本上:基于文本长度的按钮宽度,基于按钮宽度的输入栏宽度。并且表格的完整宽度是固定的,并且应该填充按钮和输入栏。根据提交按钮宽度自动调整输入宽度
也比JS更喜欢css解决方案。 有人可以给我一些帮助吗? 感谢
答
简单的JavaScript Fiddle Demo
用CSS
word-wrap: break-word;
form {
display: inline-flex;
}
input,
button {
width: 50%;
word-wrap: break-word;
box-sizing: border-box;
}
<form>
<input type="text" />
<button>increase text and see the width of input, button</button>
</form>
谢谢你的答案,但如果窗体的宽度是固定的,我想txt的是什么在一条线上。 (文本宽度不会超过表单的宽度) –