CSS 按钮低于它应该在的位置

Question

我从来没有创建过这样的搜索栏，但我正在尝试制作一个搜索栏，其中按钮与输入框接触。我已经做到了这一点，但按钮低于应有的位置，我不确定为什么。

以上是目前的样子。如您所见，按钮低于应有的位置。

这是我的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;
}

下面是我如何使用按钮:

<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>

我怎样才能解决这个问题，使按钮位于它应该在的位置？ (输入区旁)

谢谢!

Answer 1

您需要为两者(输入和按钮)提供 float:left

我创建了一个 JSFiddle它会帮助你