ASP.NET ListView 表模板不能正常工作 (项目无序)

发布时间: 2017/3/26 1:07:49
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我用下面的代码从 ListView 控件生成的表视图后一些更多文档加载 (主要是 10 项),干扰项的顺序,

<asp:ListView ID="ListView1" runat="server" >
    <LayoutTemplate>
        <ul>
            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />    
        </ul>                
    </LayoutTemplate>
    <ItemTemplate>
        <li>
             <table >
                 <tr>
                     <td >
                         <asp:ImageButton ID="ibtnDownload" ImageUrl='../res/i/UploadedFiles.jpg' ToolTip='<%#Eval("Name") %>' runat="server"  OnClick="ibtnDownload_Click" />
                         <asp:Label ID="lblFullName" runat="server" Text='<%#Eval("FullName") %>' Visible="false"></asp:Label>
                     </td>

                 </tr>
                 <tr>
                     <td >
                          <asp:CheckBox ID="chkSelect" runat="server" style="margin-right:1px;"  />

                   <asp:LinkButton ID="LinkFileName" runat="server" Text='<%#Eval("Name") %>' OnClick="ibtnDownload_Click"></asp:LinkButton></td>

                 </tr>

             </table>
        </li>
    </ItemTemplate>
    <EmptyDataTemplate>
        <p style="font-weight:bold; margin:50%; width:200px;">No Files Uploaded </p>
    </EmptyDataTemplate>
</asp:ListView>

用于此 listview CSS 是,

 li 
 {
    display: inline ;   
 }
 ul li table 
 {
   float: left;
   margin-left:10px;
   width: 10em;
   text-decoration: none;
   text-align:center;
   overflow:hidden;
   color:black;
   padding: 0.2em 0.6em;
   border-right: 1px solid white;
   cursor: pointer; cursor: hand; 
 }

下面是结果的画面The list view is disturbed

解决方法 1:

Css 选项 float: left; 导致这种行为,因为您的项目具有不同的高度。完整的行时下, 一个项目浮远到尽可能上面,没有其上部边缘浮顶离开任何前一项的下边缘。

其效果是,每当 3 行文本紧接着是一个 2 行文本项 (在 1 和 3 的线) 或 4 行文本紧接着 3 行文本 (在第 4 行),接下来的行项目对齐在以下这些项目的角落里。

为了防止这种行为,共同为设置高度的所有项目。

这可以通过移动浮动行为从桌上拉到 <li> 和添加固定的高度,或使用一些动态 (jQuery) 方法来设置高度相等的基础最大的项目。

你也必须将其他一些 css 属性移动到列表项,因为它们与相关的浮动

li {
    display: inline;
    min-height:150px; /* set your desired height*/
    max-height:150px;
    float: left;
    overflow: hidden;
}
赞助商