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

Question

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

我正在尝试将两组按钮对齐到上面div中的面板.左侧面板上的按钮名为but1,但是为2.其他人只是1,但是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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pri*_*y G 7

更改你的代码

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

Run Code Online (Sandbox Code Playgroud)

设置margin-left:在btn3中为150px

归档时间：	13 年，12 月前
查看次数：	26394 次
最近记录：	9 年，4 月前