html - フォーム付きの水平スタック

Question

2 つの要素を持つ全角フォームを探しています。

___________________________________
|     Text-Input     |   Button   |
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾

ウィンドウ (モバイル ビューポート) のサイズは不明ですが、ボタンの幅は固定である必要があります。入力サイズはできるだけ広い方がいいです...難しいのは、入力要素を飼いならすのが難しいことです...

これまでのところ、入力の周りのラッパーとフローティングhttp://dabblet.com/gist/2714788である程度の進歩がありました(ただし、html の入力の前にボタンを配置する必要がありました)。より良い方法はありますか？

Answer 1

<form>
<input placeholder="This is not easy...">
<button>Submit</button>    
</form>

このコードをフォームに使用し、このスタイルを入力に使用してみてください

input { width:80%; float:left; }

そして、これはボタン用です

button { width:19%; float:left; }

このコードを使用すると動作します。