テキストボックスとボタン適切

Question

テキストボックスとボタンが正しく

こんにちは皆が揃っていない整合していない、私は私のテキストボックスとボタンが適切に揃えることができなかったことを、ここで問題に直面しています。マージンの上限と下限を含むマージンを調整しようとしましたが、それらはまったく同じ場所にとどまっています。ここで何が間違っているのか私は無知です。手伝ってくれませんか？

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

.button-addでdisplay: inline-block; vertical-align: middle;を追加し、.textbox代わりにテキストボックスクラスのマージン下を使用してのhere

Answer 2

を参照してください、あなたが使用することができますボタン追加クラスのmargin-bottom。そうすれば、xの余白がbutton-addの下に残り、テキストボックスが表示されます。テキストボックスクラスにmarginコマンドを入れないでください。 これが役立つことを願っています！