具有流布局的 .Net 列表视图水平显示

本文关键字：视图 水平 显示 列表 Net 流布局 | 更新日期: 2023-09-27 18:36:34

我正在使用引导程序在我的第一个移动网站上工作。我正在尝试创建一个响应式的列表视图，我做了一些研究，我需要选择 Layout= Flow，但我的问题是这个布局从上到动（一列）。我需要能够从左到右显示最多 4 个项目，但我无法让它工作。

法典

    <asp:ListView ID="ProductsListView"  DataSourceID="SqlDataSource1"  runat="server" DataKeyNames="ID">
    <LayoutTemplate >
        <div ID="itemPlaceholderContainer" runat="server" style="">
            <span runat="server" id="itemPlaceholder" />
        </div>
        <div style="">
        </div>
    </LayoutTemplate>

    <ItemTemplate>
        <span style="">ID:
        <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
        </span>
    </ItemTemplate>
  </asp:ListView>

具有流布局的 .Net 列表视图水平显示

看起来您遇到了与此用户相同的问题。

asp.net 中的水平列表视图

布局模板包含一个块级元素（div）。这意味着 ItemTemplate 将被包装在div 中，该div 将占据整个可用宽度。

您应该能够从布局模板中删除div，使其成为一个跨度，或者使其成为一个表格，就像我从@mshsayem链接的帖子的选定答案一样

如果您只想在一行中显示图像，则可以将 它们在单行的列中。尝试重写列表视图标记 如下所示（将table 、tr标记移动到LayoutTemplate）：

<asp:ListView runat="server" ID="PageHorizon">
  <LayoutTemplate>
      <table>
      <tr>
         <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
      </tr>
      </table>
  </LayoutTemplate>
  <ItemTemplate>  
          <td>
              <img src='<%#Eval("ImagePath")%>' alt="Single Image"  
              width="64px" height="64px" />
          </td>       
  </ItemTemplate>
</asp:ListView>

下面的脚本显示布局 = 水平流动的列表视图项，并且它是响应式的。我希望有人觉得它有用。

    <div style=" text-align: center;">
                <!-- start listview-->
                 <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1">

                    <LayoutTemplate >
                    <div ID="itemPlaceholderContainer" runat="server" >
                        <span runat="server" id="itemPlaceholder" />
                    </div>
                   </LayoutTemplate>

                    <EmptyDataTemplate>
                        <span>No data was returned.</span>
                    </EmptyDataTemplate>
                    <ItemTemplate>
                    <table style="display: inline-block;" >
                     <tr >
                                <td colspan="3">
                                    <asp:Image ID="Image1" runat="server" Height="200px" 
                                        ImageUrl='<%# Eval("Picture") %>' Width="150px" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    <span style="background-color: #FFFBD6;color: #333333;">
                                    <asp:Label ID="OrderOfferNameLabel" runat="server" 
                                        Text='<%# Eval("WHATEVER") %>'></asp:Label>
                                    </span>
                                </td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                            <tr>
                                <td>
                                    &nbsp;</td>
                                <td>
                                    <span style="background-color: #FFFBD6;color: #333333;">
                                    <asp:Label ID="ProductNameLabel" runat="server" 
                                        Text='<%# Eval("WHATEVER") %>'></asp:Label>
                                    </span>
                                </td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <asp:Button ID="Button1" runat="server" Height="44px" 
                                        style="height: 26px; width: 56px" Text="Button" Width="380px" />
                                </td>
                            </tr>
                    </table>

                    </ItemTemplate>
                </asp:ListView>
         </div>
相关文章：