ASP:Repeater and embedded radiobuttons (cont.)

问题

This is a continuation of the partially resolved issue posted here: ASP:Repeater and embedded radiobuttons

I'm now trying to format the display of my photos so that they still run horizontally, but the radiobutton appears directly beneath each photo. By default, they appear to the right of the photo when using my current code:

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

It was later suggested that I wrap my RadioButton control with <p> tags as follows:

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

But this just made all of the photos display vertically. Here's what the before and after output look like...

回答1:

The <p> wrapping the radio buttons will be displaying as a block element hence the reason your images are appearing vertically.

This HTML/CSS should do the trick and you can tweak the margin as desired:

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

来源：https://stackoverflow.com/questions/40034891/asprepeater-and-embedded-radiobuttons-cont

标签

ASP.NET

webforms

radio-button

repeater