Html 如何在 css/asp.net 中正确对齐按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8484334/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align buttons properly in css/asp.net?
提问by user603007
I'm trying to align 2 sets of buttons to the panel in the div above. The buttons called but1, but2 for the left panel. The others are but1, but2, but3 right panel. At the moment the buttons are in a straight line under the 2 panels. So I would like the 2 left buttons right under the left panel aligned left. The 2 right buttons right under the right panel align left?
我正在尝试将 2 组按钮与上面 div 中的面板对齐。左侧面板的按钮称为 but1、but2。其他是but1, but2, but3 右面板。目前，按钮位于 2 个面板下方的一条直线上。因此，我希望左侧面板下方的 2 个左侧按钮向左对齐。右侧面板下方的 2 个右侧按钮向左对齐？
HTML:
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>
回答by Prince Antony G
Change ur code
更改您的代码
<asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px; margin-left: 150px" />
set margin-left: 150px in btn3
在 btn3 中设置 margin-left: 150px
回答by adeptmatty
For future viewers, I found that this works better:
对于未来的观众，我发现这更有效：
<asp:Button ID="btn3" runat="server" Text="but1 right"
CssClass="special" Style="margin-left:auto; display:block;" />
That way, if you change the width of your button, you don't have to do math to figure out the margin size.
这样，如果您更改按钮的宽度，则无需进行数学运算即可确定边距大小。
