CSS 버튼이 있어야 할 위치 아래에 있습니다

Question

검색 막대를 만든 적이 없지만 버튼이 입력 상자를 터치하는 검색 막대를 만들려고합니다. 나는 이것을 달성했지만 버튼이 있어야하는 것보다 낮아서 왜 그런지 잘 모르겠습니다.

위는 현재 모습입니다. 보시다시피 버튼이 있어야하는 것보다 낮습니다. 어떻게 내가 있어야 할 곳에 버튼이 그래서이 문제를 해결할 수

<div class="searchBox"> 
    <form class="form-wrapper cf" action="" method="post"> 
     <input type="text" name="username" placeholder="Search user..." required> 
     <button type="submit">Go!</button> 
    </form> 
</div> 

: 여기

내 CSS입니다 :

.searchBox { 
    margin-top: 10px; 
    width: auto; 
    height: auto; 
    float: left; 
    margin-left: 35px; 
} 

.cf:before, .cf:after{ 
    content:""; 
    display:table; 
} 

.cf:after{ 
    clear:both; 
} 

.cf{ 
    zoom:1; 
} 
.form-wrapper input { 
    width: 285px; 
    height: 30px; 
    padding: 10px 6px; 
    border-radius: 3px 0 0 3px; 
    background-color: #ededed; 
    border: 1px solid #d9d9d9; 
    color:#363636; 
} 

.form-wrapper input:focus { 
    outline: 0; 
    background: #E8E8E8; 
} 

.form-wrapper button { 
    overflow: visible; 
    position: relative; 
    float: right; 
    border: 0; 
    cursor: pointer; 
    height: 30px; 
    width: 45px; 
    color: #fff; 
    background: #48A6D9; 
    border-radius: 0 3px 3px 0; 
} 

.form-wrapper button:hover{  
    background: #4DAFE3; 
    border: 0; 
} 

.form-wrapper button:active { 
    border: 0; 
} 

그리고 여기이 버튼을 사용하는 방법입니까? (입력 영역 옆)

고마워요!

Answer 1

당신은 당신이, 예를 들어, 플로트 '에 모두 폼 입력을 설정할 수 있습니다 당신에게