текстовое поле и кнопка не выровнены должным образом

Question

Textbox и кнопки не выровнены должным образом

Привет всем, я столкнулся с проблемой здесь, что мое текстовое поле и кнопка не может выровнять должным образом. Я попытался отрегулировать маржу, включая верхнюю и верхнюю поля, они все равно остаются в одном месте. Я не знаю, что здесь не так. Не могли бы вы мне помочь?

Asp.Net:

<asp:Panel HorizontalAlign="center" runat="server">     
    <asp:TextBox ID="SearchTextBox" runat="server" placeholder="  Search your item here." CssClass="textbox"></asp:TextBox> 
    &nbsp;  
    <asp:Button ID="btnSearch" runat="server" OnClick="SearchOnClick" CssClass="button-add" />      
</asp:Panel> 

Css:

.textbox { 
    border: 1px solid #848484; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 25px; 
    outline: none; 
    margin-bottom:10px; 
    height: 25px; 
    width: 350px; 
    background-color: #ede6e6; 
} 

.button-add { 
    background-image: url(../Images/button_searchSmall.gif); 
    background-size: auto; 
    width: 40px; 
    height: 40px; 
    background-repeat: no-repeat; 
    background-position: center; 
    margin-top:20px; 
    color: transparent; 
    background-color: transparent; 
    outline: 1px; 
    border: none; 
} 

Answer 1

Добавить display: inline-block; vertical-align: middle; в .button-add и .textbox см here

Answer 2

Вместо использования края дна в классе текстового поля, вы можете использовать margin-bottom в классе button-add. Таким образом, х количество маржи будет оставлено под кнопкой-добавить, и тогда ваше текстовое поле может прийти. Не помещайте какую-либо команду поля в класс текстового поля. Надеюсь, это поможет!