ASP:Repeater 和嵌入式单选按钮（续）

Question

这是此处发布的部分已解决问题的延续：ASP:Repeater and embedded radiobuttons

我现在正在尝试格式化我的照片的显示格式，以便它们仍然水平运行，但单选按钮显示在每张照片的正下方。默认情况下，当使用我当前的代码时，它们会出现在照片的右侧：

<asp:Repeater ID="repPhotos" runat="server">
  <ItemTemplate>
    <asp:hyperlink id="link" NavigateUrl='<%# Container.DataItem %>' runat="server">
        <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' Height="10%" Width="10%" />
    </asp:hyperlink>
    <asp:RadioButton runat="server" ID="rbPhoto" CssClass="myRadioButton" onclick="radioButtonClick(this)" />
  </ItemTemplate>
</asp:Repeater>

后来有人建议我用<p>标签包装我的RadioButton控件，如下所示：

<asp:Repeater ID="repPhotos" runat="server">
  <ItemTemplate>
    <asp:hyperlink id="link" NavigateUrl='<%# Container.DataItem %>' runat="server">
        <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' Height="10%" Width="10%" />
    </asp:hyperlink>
    <p>
        <asp:RadioButton runat="server" ID="rbPhoto" CssClass="myRadioButton" onclick="radioButtonClick(this)" />
    </p>
 </ItemTemplate>
</asp:Repeater>

但这只是让所有照片都垂直显示。这是之前和之后输出的样子......

Answer 1

包裹单选按钮的<p> 将显示为块元素，因此您的图像垂直显示。

这个 HTML/CSS 应该可以解决问题，您可以根据需要调整边距：

<style type="text/css">
    .photoContainer {float: left; margin: 10px; width:200px;}
    .radioButton {text-align: center;}
</style>
<asp:Repeater ID="repPhotos" runat="server">
    <ItemTemplate>
        <div class="photoContainer">
            <asp:HyperLink ID="link" NavigateUrl='<%# Container.DataItem %>' runat="server">
                <asp:Image ID="Image" runat="server" ImageUrl='<%# Container.DataItem %>' Height="10%" Width="10%" />
            </asp:HyperLink>
            <div class="radioButton">
                <asp:RadioButton runat="server" ID="rbPhoto" CssClass="myRadioButton" onclick="radioButtonClick(this)" />
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>