CSS Button is below where it should be

我从来没有创建过这样的搜索栏，但我正在尝试创建一个搜索栏，其中按钮正在触摸输入框。我已经实现了这一点，但按钮比它应该低，我不知道为什么。CSS Button is below where it should be

Screenshot

以上就是它目前的样子。正如你所看到的，按钮比应该低。

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

我怎样才能解决这个使按键是它应该是什么？（在输入区域旁边）

谢谢！

来源

2014-10-07 Matt

你可能，例如，同时设置表单输入到'浮动：left' - 你目前有按钮设置为“float：right”，但大概这不是你想达到的。 [看到这个小提琴]（http://jsfiddle.net/y8tudbr2/）。 PS在询问SO – danyamachine 2014-10-07 02:26:00

你需要给float:left两个（输入和按钮）

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

来源

2014-10-07 02:28:51

之前，试着了解你的代码在做什么，一片一片，这很重要。谢谢！ – Matt 2014-10-07 02:35:03

CSS Button is below where it should be

回答

相关问题