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

回答

相關問題