Làm cách nào để căn chỉnh đối tượng theo chiều dọc trong ASP.NET?

Question

Tôi đã rối tung xung quanh với asp.net một lúc và luôn luôn có vấn đề sắp xếp các đối tượng với các độ cao khác nhau trên cùng một hàng. Ví dụ, trong trường hợp này, tôi có một nhãn tìm kiếm, một trường văn bản, sau đó là một nút hình ảnh. "Cách thích hợp" để có được ba mục này để căn chỉnh đúng cách là gì?

mã hiện tại của tôi:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
    </asp:Content> 
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <asp:Panel VerticalAlign="Center" runat="server"> 
    <asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Search Tests:"></asp:Label> 
    <asp:TextBox ID="searchTextBox" runat="server" Font-Size="X-Large" 
     Height="30px" style="margin-left: 13px; margin-top: 0px" Width="219px"></asp:TextBox> 
    <asp:ImageButton ID="ImageButton2" runat="server" Height="45px" 
     ImageUrl="~/Images/SearchButton.PNG" style="margin-left: 18px; margin-top: 0px" 
     Width="95px" /> 
    </asp:Panel> 
</asp:Content> 

Answer 1

Cách đơn giản nhất là sử dụng CSS hoặc bảng. Tôi đặt một div xung quanh với một chiều cao và thẳng đứng thẳng hàng đầu. CSS Reference

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <asp:Panel ID="Panel1" VerticalAlign="Center" runat="server"> 
     <div style="height: 40px; vertical-align: top"> 
      <div style="padding-top: 10px; float:left;"> 
       <asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Search Tests:"></asp:Label> 
      </div> 
      <div style="padding-top: 5px; float:left;"> 
       <asp:TextBox ID="searchTextBox" runat="server" Font-Size="X-Large" Height="30px" 
        Style="margin-left: 13px; margin-top: 0px" Width="219px"></asp:TextBox> 
      </div> 
      <div style="padding-top: 5px; float:left;"> 
       <asp:ImageButton ID="ImageButton2" runat="server" Height="45px" ImageUrl="~/Images/SearchButton.PNG" 
        Style="margin-left: 18px; margin-top: 0px" Width="95px" /> 
      </div> 
     </div> 
    </asp:Panel> 
</asp:Content> 

Answer 2

tôi đã có cùng một vấn đề và tôi nghĩ rằng việc sử dụng một bảng hoặc một div chỉ để gắn kết các Textbox đó là quá mức.

tôi giải quyết đơn giản:

<asp:TextBox ID="TextBox2" runat="server" Width="60px"></asp:TextBox>&nbsp; 
<asp:ImageButton ID="ImageButton1" runat="server" 
       ImageUrl="~/imatges/imgNou.png" 
       CssClass="style3" ImageAlign="AbsBottom" /> 

Và thêm margin-top trong thiết kế, IDE thêm:

.style3 
{ 
    margin-top: 6px; 
}