검색 상자 옆에 또는 안에 표시 할 검색 버튼 (이미지)을 얻으려고하면 검색 상자 옆에 검색 버튼 (이미지)을 표시합니다.

Question

내가 시도한 모든 것, 검색 버튼 (이미지)은 항상 검색 창 아래에서 끝나고 어떤 이유로 중앙에 위치합니다.

<form id="navigationSearchForm" action="http://products.divalsafety.com/storefrontCommerce/search.do" method="get" name="searchForm" accept-charset="UTF-8"> 
     <input id="searchInputBox" type="text" name="keyword" size="25" maxlength="75" value=""> 
      <span id="keywordspan" style="display: none; visibility: hidden;"><label>keyword</label> 
       <input id="keywordInput" type="text" name="searchType" value="keyword" size="12" maxlength="10"> 
      </span> 
      <span id="emailspan" style="display: none; visibility: hidden;"><label>E-mail</label> 
       <input id="emailAddressInput" type="text" name="emailAddress" size="12" maxlength="20"> 
      </span> 
     <input id="searchGoButton" style="width: 27px;" type="image" src="/images/searchbutton27px.png" alt="Search"> 
</form 

Answer 1

HTML을 HTML이 아닌 별도로 정의하십시오. 그럼에도 불구하고 코드를 작성하고 검색 이미지에 위치 스타일을 추가했습니다. 이것은 효과가있다.

<form id="navigationSearchForm" action="http://products.divalsafety.com/storefrontCommerce/search.do" method="get" name="searchForm" accept-charset="UTF-8"> 

     <input id="searchInputBox" type="text" name="keyword" size="25" maxlength="75" value=""></input> 

     <span id="keywordspan" style="display: none; visibility: hidden;"><label>keyword</label> 

     <input id="keywordInput" type="text" name="searchType" value="keyword" size="12" maxlength="10"></input> 
     </span> 

     <span id="emailspan" style="display: none; visibility: hidden;"><label>E-mail</label> 
     <input id="emailAddressInput" type="text" name="emailAddress" size="12" maxlength="20"></input> 
     </span> 

     <input id="searchGoButton" style="width: 27px; position:relative; left:-40px; top:10px;" type="image" src="/images/searchbutton27px.png" alt="Search"></input> 
    </form>