文本框和按钮未正确对齐

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

在display: inline-block; vertical-align: middle;和.button-add中添加.textbox，请参阅here

Answer 2

您可以在按钮添加类中使用margin-bottom，而不是在textbox类中使用margin-bottom。这样，x量的保证金将留在按钮添加下，然后你的文本框就可以了。不要在textbox类中放置任何margin命令。 希望这有帮助！