2017-03-01 103 views
0
<form> 
    <input type="text" /> 
    <button>this text can be changed</button>  
</form> 

目前我有这样的一些代码,问题是可以根据内容改变按钮内的文字,所以我想要的按钮和输入栏可以动态改变宽度基于彼此。 基本上:基于文本长度的按钮宽度,基于按钮宽度的输入栏宽度。并且表格的完整宽度是固定的,并且应该填充按钮和输入栏。根据提交按钮宽度自动调整输入宽度

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

回答

0

简单的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>

+0

谢谢你的答案,但如果窗体的宽度是固定的,我想txt的是什么在一条线上。 (文本宽度不会超过表单的宽度) –