CSSの検索ボックスが

Question

は私が持って左にフロートしません。この

  <td width="312" valign="center" height="157" background="{{ 'BT_S3.png' | asset_url }}"> 
      <div style="width:95%; text-align: left; height:52px; background-image:url('{{ 'search_bar.png' | asset_url }}');" float="left"> 
      <form action="/search" method="get"> 
      <input type="text" name="q" src="{{ 'search_bar.png' | asset_url }}" /> 
      <input type="image" value="Search" src="{{ 'search_button.png' | asset_url }}" /> 
      </form> 
      </div> 
      </td> 

これは http://clarkbetty.myshopify.com/# パスワードに位置私の検索ボックスのための私のHTMLです：

betweu私は浮いて検索ボタンをしたいと思います検索ボックスとボタンが同じ行にあることを確認します。私はたくさんのことを試しましたが、何もできません。助けてもらえますか？

Answer 1

もう1つのアプローチは、相対配置をラップform要素に適用し、内側のコントロール（検索フィールドとボタン入力）で絶対配置を使用して、内部のレイアウトを制御することです。これらの線に沿って

何か：

form { 
    position: relative; 
} 
input[type='text'], 
input[type='image'] { 
    position: absolute; 
    top: 0; 
} 
input[type='text'] { 
    left: 0; 
    width: 100%; 
    padding-right: 20px; 
} 
input[type='image'] { 
    right: 0; 
    width: 20px; 
} 

Answer 2

あなたは、テキストボックスとボタン要素の両方にstyle="float:left"を追加する必要があります。

さらに、これらのルールをCSSファイルに入れて、これらの要素をIDまたはクラスで参照することをお勧めします。

Answer 3

変更この行：これまで

<input type="text" name="q" src="{{ 'search_bar.png' | asset_url }}" /> 

：

<input type="text" style="float:left;" name="q" src="{{ 'search_bar.png' | asset_url }}" /> 

フロート：左が内側にスタイル属性である必要があります。