cssテキストボックスの横にフローティングボタンがある

Question

自分のサイトのモバイルテンプレートを作成していて、div内のテキストボックスをwidth：100％とし、その横にhtmlサブミットボタンを付けるとします。 2行目に折り返します。誰かがこれのためにいくつかのCSSで私を助けることができますか？

<style type="text/css"> 
    .form_input {} 
    .form_submit{} 
</style> 

<div> 
    <input type="text" name="s" value="" class="form_input" /> 
    <input type="submit" value="Search" class="form_submit" /> 
</div> 

Answer 1

CSSボックスモデルの動作によりラップが発生します。 100%は、コンテキストボックスの100％を意味します。したがって、入力フィールドは完全に行を塗りつぶします - >送信ボタンは次の行に折り返さなければなりません。入力ボックスに幅などを指定することができます。 80％、送信ボタンの幅は20％です。

私が実際にやりたいことは、入力{width：100％ - 200px}、提出{width：200px}のようなものだと思います。これはcss2では不可能です。

Answer 2

divをposition：relativeに設定します。その後、テキストボックスの両方を設定し、絶対位置にボタンを提出する：

div.box{ position:relative; } 

input[type="text"]{position:absolute;left:0;top:0;} 
input[type="submit"]{positon:absolute;right:0;top:0;} 

Answer 3

あなたはwidth: 100%;にテキストボックスを設定した場合、それが利用可能なすべてのスペースを取るだろう、と常にダウン送信ボタンを押してください。

.form_input { 
    width: 70%; 
} 
.form_submit{ 
    width: 20%; 
} 

それらは同一線上になります。

このコードは、両方の入力要素の幅を指定します。 （余裕の余地が残っているので70％+ 20％= 90％）