CSSフォームの送信スタイリング

Question

私はCSS/HTML送信フォームを作成していますが、下の画像のようになります。

[送信]ボタンをテキスト入力の中に表示させる方法はわかりませんか？

Answer 1

あなたのテキストボックスと正確に背景色を持っているコンテナのdivを置きます。これにより、テキストボックス内にあるボタンの効果を得ることができます。

Answer 2

簡単にdivに入れ、divを入力テキストのようにスタイルします。次に、入力フィールドをdivと同じ背景にします。

Answer 3

私はblogと似たようなことをして、相対的な配置を使ってコメントを投稿しました。このメソッドで余分なHTMLマークアップは必要ありません。

開始ボタンをテキスト入力のすぐ下に置いてから、相対入力でテキスト入力に上に移動します。このようなものはうまくいくはずです。

input[type="text"] { <-- Your text input (height comes out to 35px with padding) 
    height: 25px; 
    padding: 5px; 
    margin-bottom: 0; 
} 

input[type="submit"] { <-- Your submit button (10px shorter for padding) 
    height: 25px; 
    position: relative; 
    bottom: 35px; 
    right: 5px; 
    margin-top: 0px; 
    margin-bottom: -30px; <-- To get rid of the empty leftover space. 
}