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

Question

我正在學習如何使用ASP.Net 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>

現在，我嘗試添加一個按鈕，但它並沒有出現在我想要它的位置，它會拋出顯示：

我的ItemTemplate代碼如下所示，現在：

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

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

謝謝！

Answer 1

在您的項目模板中嘗試此操作：

   <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>

Answer 2

這應該將按鈕放在圖像的左下角，並保持圖像布局與第一個屏幕截圖中的相同。

<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>將是另一種選擇。

Answer 3

你可以把<br />放在圖像和按鈕之間