如何在 css/asp.net 中正确对齐按钮？答案

【问题标题】：How to align buttons properly in css/asp.net?如何在 css/asp.net 中正确对齐按钮？
【发布时间】：2012-01-19 00:55:11
【问题描述】：

我正在尝试将 2 组按钮与上面 div 中的面板对齐。左侧面板的按钮称为 but1，but2。其他是but1,but2,but3 右面板。目前，按钮位于 2 个面板下方的一条直线上。所以我希望左面板下方的 2 个左按钮左对齐。右侧面板下方的 2 个右侧按钮向左对齐？

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>

【问题讨论】：

标签： asp.net html css

【解决方案1】：

更改你的代码

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

在 btn3 中设置 margin-left: 150px

【讨论】：

我还希望它靠近面板底部。现在离它还很远

【解决方案2】：

对于未来的观众，我发现这样效果更好：

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

这样，如果您更改按钮的宽度，则无需进行数学运算即可计算出边距大小。

【讨论】：

哪种方式效果更好？这是对另一个答案的评论吗？