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

다른 접근법은 랩핑 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" 텍스트 상자와 버튼 요소 모두를 추가해야합니다.

<input type="text" [...] style="float:left" /> 
<input type="image" [...] 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 }}" /> 

플로트 : 왼쪽 내부 스타일 속성이어야합니다.