如何將按鈕放在Repeater控制中的圖像下方？

我正在學習如何使用ASP.Net Repeater控件。目前，我的輸出是這樣的： enter image description here 如何將按鈕放在Repeater控制中的圖像下方？

我的來源是這樣的：

<form id="form1" runat="server"> 
<div> 
    <asp:FileUpload runat="server" ID="FileUpload1" />&nbsp 
    <asp:Button runat="server" Text="Upload" ID="Button1" OnClick="Button1_Click" /> 
    <hr /> 
    <asp:Repeater runat="server" ID="Repeater1"> 
     <ItemTemplate> 

       <asp:Image runat="server" Width="200px" Height="200px" ID="image1" ImageUrl='<%# Eval("Url") %>' /> 

     </ItemTemplate> 
    </asp:Repeater> 
    <hr /> 
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
     SelectCommand="SELECT [Url] FROM [Gallery]"></asp:SqlDataSource> 
</div> 
</form>

現在，我嘗試添加一個按鈕，但它並不完全出現它，我想和它拋出關閉顯示器： enter image description here

我的ItemTemplate代碼看起來是這樣，現在：

  <asp:Image runat="server" Width="200px" Height="200px" ID="image1" ImageUrl='<%# Eval("Url") %>' /> 
      <asp:Button runat="server" ID="btnCopy" Text="Copy" />

所以，我在想，我怎麼能拿的按鈕圖像下出現？我猜這可以通過使用CSS來處理，但我不知道如何。有人可以提供一些幫助嗎？

謝謝！

來源

2013-04-10 Kevin

你沒有提到你想要的按鈕 – 2013-04-10 16:10:51

呵呵，對不起，因爲模糊不清！我在標題中提到過，但我會將其添加到主要問題中。感謝您指出了這一點！ – Kevin 2013-04-10 16:13:56

試試這個在您的項目模板：

<div style="float:left;overflow:hidden;display:inline-block;"> 
       <asp:Image runat="server" Width="200px" Height="200px" ID="image1" ImageUrl='<%# Eval("Url") %>' /> 
       <br/> 
       <asp:Button runat="server" ID="btnCopy" Text="Copy" /> 
    </div>

來源

2013-04-10 16:13:56 DaveB

嗯，這樣做，使每個圖像出現在自己的行，就像在一列圖像，而不是圖像的行。 – Kevin 2013-04-10 16:17:22

對不起，在style屬性中忘記了'display：inline-block;'。我已經更新了我的答案。 – DaveB 2013-04-10 16:23:32

就像我想要的一樣。非常感謝！ – Kevin 2013-04-10 16:28:08

你可以把<br />形象和按鍵之間

來源

2013-04-10 16:08:05

嗯，這樣做，使每個圖像出現在自己的行，就像在一列圖像，而不是圖像的行。 – Kevin 2013-04-10 16:18:40

@ DaveB的回答然後 – 2013-04-10 16:26:33

這應該把按鈕在圖像的左下角和保持圖像佈局和你的第一個截圖一樣。

<ItemTemplate> 
    <div style="width:200px;height:200px;float:left;position:relative;margin:2px;"> 
     <asp:Image runat="server" Width="200px" Height="200px" ID="image1" ImageUrl='<%#Eval("Url") %>' /> 
     <asp:Button runat="server" ID="btnCopy" Text="Copy" style="position:absolute;left:2px;bottom:2px;" /> 
    </div> 
</ItemTemplate>

如果你不能得到<div>的正確對齊，<li>的將是另一種選擇。

來源

2013-04-10 16:37:16

如何將按鈕放在Repeater控制中的圖像下方？

回答

相關問題