如何将按钮放在CSS图像旁边？

在我的asp.net页面上，我有一些Update Pannel。为了避免异步回发问题，我必须将我的Print Button放在面板之外，但所有其他标签和按钮的图像仍在此面板内，所以我想要控制CSS中的页面样式，以便将btnPrint放在image1的旁边。如何将按钮放在CSS图像旁边？

这里是我的页面布局：

<div id="Toolbar"> 
    <asp:UpdatePanel ID="UpdateToolbar" runat="server" UpdateMode="Conditional"> 
     <ContentTemplate> 
      <asp:Label ID="Label3" runat="server" Text=" Months: "></asp:Label>&nbsp; 
      <asp:DropDownList ID="ddlMonth" runat="server"></asp:DropDownList> 

      <asp:Label ID="Label2" runat="server" Text=" Year: "></asp:Label>&nbsp; 
      <asp:DropDownList ID="ddlYear" runat="server"></asp:DropDownList> 
      <b id="buttonWrap">> 
       <asp:Image ID="Image2" runat="server" ImageUrl="Images/DefRefreshBtn.png" Width="15" 
        Height="20" />&nbsp; 
       <asp:LinkButton ID="btnRefresh" runat="server" OnClick="btnRefresh_Click1">Refresh</asp:LinkButton>&nbsp;&nbsp;&nbsp; 
       <asp:Image ID="Image1" runat="server" ImageUrl="Images/DefPrintBtn.png" Width="27" 
        Height="20" /> 
      </b>     
     </ContentTemplate> 
    </asp:UpdatePanel> 
    <asp:LinkButton ID="btnPrint" runat="server" onclick="btnPrint_Click" CssClass="printBtn">Print</asp:LinkButton>&nbsp;&nbsp;&nbsp; 
</div>

目前，我使用这个CssClass="printBtn"：

.printBtn 
{ 
    position: relative; 
    top: -23px; 
    right: -700px; 
    font-weight: bold; 
}

但这种硬编码可能导致问题在不同的浏览器。是否有任何方法可以在CSS中指定我的按钮在image1旁边？

来源

2014-05-19 Bryuk

实际输出HTML。 –

向我们展示了HTML的实际渲染，请不要使用'asp'代码作为设计师想回答您的问题的人 – Viscocent

您将需要使用绝对定位。更好的解决方案是将其保留在UpdatePanel中，但使打印按钮执行完整的回发。为此，您可以用PostBackTrigger

下面是例子如何做一个完整的回传需要 Force certain controls to do a full postback?

来源

2014-05-19 15:43:56 IanS

这应该是一个评论，而不是一个答案。 –

但它是一个答案 – IanS

我不同意....这是一个建议。你不知道任何关于实际的HTML，所以绝对位置可能不合适。 –

如何将按钮放在CSS图像旁边？

回答

相关问题