ASP：直放站和嵌入式單選按鈕（續）

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>標籤我的單選按鈕控件，如下所示：

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