根據提交按鈕寬度自動調整輸入寬度

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; 

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>