如何在css/asp.net中正確對齊按鈕？

我想把2組按鈕對齊上面的div中的面板。這些按鈕稱爲but1，but2用於左側面板。其他人是but1，but2，but3 right panel。此時按鈕在2個面板下方成直線。所以我想將左側面板下方的2個左側按鈕向左對齊。右側面板右下方的2個右鍵對齊左側？如何在css/asp.net中正確對齊按鈕？

HTML：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style> 
     div.input 
     { 
      clear: left; 
      margin: 0 0 0.2em; 
      padding: 6pt 1em; 
     } 

     .flclass 
     { 
      float: left; 
     } 

     .imageDetails 
     { 
      color: Gray; 
      line-height: 1.2; 
      margin: 34px 0 0 10px; 
     } 

     input.special 
     { 
      background: none repeat scroll 0 0 #913297; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div class="input"> 
     <label> 
      panel 1</label> 
     <asp:Panel CssClass="flclass" ID="pnlcustomerImage" runat="server" Style="background-color: #DDDDDD; 
      border: solid 1px black; vertical-align: middle; text-align: center; padding: 0" 
      Width="200px" Height="70px"> 
      <asp:Literal ID="lt1" runat="server" Text="Panel left" /> 
      <asp:HyperLink ID="hl1" runat="server" Target="_blank"> 
       <asp:Image ID="im1" runat="server" Visible="false" Width="200px" Height="70px" AlternateText="Contact Admin to change your image" /></asp:HyperLink> 
     </asp:Panel> 
     <div class="flclass"> 
      <p class="imageDetails"> 
       <asp:Literal ID="lt4" Text="what to write here?" runat="server" /> 
      </p> 
     </div> 
     <label> 
      small image</label> 
     <asp:Panel CssClass="flclass" ID="pnlAgentSmallLogo" runat="server" Style="background-color: #DDDDDD; 
      border: solid 1px black; vertical-align: middle; text-align: center;" Width="120px" 
      Height="42px"> 
      <asp:Literal ID="lt2" runat="server" Text="Panel right" /> 
      <asp:HyperLink ID="hl2" runat="server" Target="_blank"> 
       <asp:Image ID="im2" runat="server" Visible="false" Width="120px" Height="42px" AlternateText="Contact Admin to change your image" /></asp:HyperLink> 
     </asp:Panel> 
     <p class="imageDetails" style="margin-top: 5px"> 
      <asp:Literal ID="lt3" Text="what to write here?" runat="server" /></p> 
     <div class="input" style="margin: top"> 
      <label> 
      </label> 
      <asp:Button ID="btn1" runat="server" Text="but1 left" CssClass="special" Style="margin-top: 54px; 
       margin-left: 10px" /> 
      <asp:Button ID="btn2" runat="server" Text="but2 left" CssClass="special" Style="margin-top: 54px; 
       margin-left: 10px" Visible="true" /> 

      <asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px; 
       margin-left: 10px" /> 
      <asp:Button ID="btn4" runat="server" Text="but2 right" CssClass="special" Style="margin-top: 26px; 
       margin-left: 10px" Visible="true" /> 
      <asp:Button ID="btn15" runat="server" Text="but3 right" CssClass="special" 
       Style="margin-top: 26px; margin-left: 10px" Visible="true" /> 
     </div> 
    </div> 
    </form> 
</body> 
</html>

來源

2011-12-13 user603007

改變我們的代碼

<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px; margin-left: 150px" />

一套保證金左：150像素的btn3

來源

2011-12-13 05:26:06

我也希望它更接近面板的底部。現在還是要遠離它 – user603007

降低margin-top –

對於未來的觀衆，我發現這工作得更好：

<asp:Button ID="btn3" runat="server" Text="but1 right" 
    CssClass="special" Style="margin-left:auto; display:block;" />

這樣，如果您更改按鈕的寬度，則不必進行數學計算以確定邊距大小。

來源

2014-01-10 22:35:14 adeptmatty

什麼方式更好？這是對另一個答案的評論嗎？ – iandotkelly

如何在css/asp.net中正確對齊按鈕？

回答

相關問題