ASP：中继器和嵌入式radiobuttons（续）

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>