검색 창 스타일 지정 및 틈새없이 이동 버튼

Question

검색 창과 이동 버튼이 완전히 만지도록 할 수있는 방법이 있습니까? 나는 검색 창과 이동 버튼이 일종의 것을 만드는 무언가를 만들려고 노력하고있다. 이 둘 사이에 작은 차이가 나는 이유를 알아낼 수 없습니다

/*SEARCH*/ 
form#searchform input{background-color:rgba(128, 129, 132, 0.4); margin-bottom: 10px; border:medium none; font-size:12px; padding:10px; width:173px;} 

form#searchform input#s{ 
width: 150px; 
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #868686; 
border-bottom: 1px #868686 solid; 
padding:10px; 
} 

form#searchform input#btn 
{width: 23px; 
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color:#00ADEE;} 

<!-- START SEARCH --> 

      <form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
      <div> 
      <input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" name="s" id="s" /> 
      <input name="go" type="submit" value=">" id="btn" /> 
      </div> 
      </form> 

    <!-- END SEARCH --> 

순간 :

여기 내 코드입니다. 또한 검색 상자에 border-bottom을 채우고 #s 클래스의 패딩도 작동하지 않습니다. 어떤 도움을 주셔서 감사합니다!

Answer 1

문제는 텍스트 필드와 버튼 사이에 공백이 있으므로 다음과 같이 문제가 해결됩니다.

<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
    <div> 
    <input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" name="s" id="s" /><input name="go" type="submit" value=">" id="btn" /> 
    </div> 
</form> 

편집 :이 http://jsfiddle.net/N2PVu/

편집처럼 2 : 또는 form#searchform input#s, form#searchform input#btn{float:left;}

Answer 2

에 한번 사용이 : 내가 원하는대로 첫 번째는 일

form#searchform input#s{ float:left }