Question

我已经读过ListView本身不能用CSS来调整它的宽度，但是你在ItemTemplate中做到了，但我无法得到它。我试图将三个ListView控件并排放置。每个控件都有一个右侧的图像和文本。想想Windows Explore文件列表，但只有一个带有名称的列。

每个ListView中的文本将少于32个字符，因此应该有足够的空间，但无论我尝试过什么，每个ListView占用屏幕的50％以上。 CSS不是我的强项。

当前的CSS错误

.lv_table{
    width:500px;
    border: 1px solid #ccc;
}
.lv_tr 
{
    width: 100px;
}
.list_view 
{
    border-style: solid;
    border-width: 2px;
    border-color: #000000;      
}

.list_image 
{    
    float: left;
    display: inline-block;        
}

.list_item_large 
{
    font-size: 1.6em;
    color: #000000;
    padding: 8px 0px 0px 0px;    
    margin: 0px auto;
    display: inline-block;  
    text-align:left;        
    min-height: 32px;      
}

ListView控件

<table  class="lv_table">
<tr class="lv_tr"><td  class="list_view">
 <asp:ListView runat="server" ID="lvwCategories" >
        <LayoutTemplate>
            <div style="width: 500px;">
                <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
            </div>
        </LayoutTemplate>

        <ItemTemplate>            
            <div class="list_image">
                    <img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
            </div>
            <div class="list_item_large ">
                <a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
            </div>               
        </ItemTemplate>
        <ItemSeparatorTemplate>
            <div>
            </div>
        </ItemSeparatorTemplate>
        <EmptyDataTemplate>
            <div>
                <img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
            </div>
            <div>
                <b>No Categories Found</b>
            </div>               

        </EmptyDataTemplate>
    </asp:ListView>
    </td>
    <td>&nbsp;</td>
    <td  class="list_view">
        <asp:ListView runat="server" ID="lvwLists">
        <LayoutTemplate>
            <div style="width: 500px;">
                <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
            </div>
        </LayoutTemplate>

        <ItemTemplate>            
            <div class="list_image">
                <img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
            </div>
            <div class="list_item_large ">
                <a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
            </div>               
        </ItemTemplate>
        <ItemSeparatorTemplate>
            <div>
            </div>
        </ItemSeparatorTemplate>
        <EmptyDataTemplate>
            <div>
                <img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
            </div>
            <div>
                <b>No Categories Found</b>
            </div>               

        </EmptyDataTemplate>
    </asp:ListView>
    </td>
        <td>&nbsp;</td>
    <td  class="list_view">
        <asp:ListView runat="server" ID="lvwItems">
        <LayoutTemplate>
            <div style="width: 500px;">
                <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
            </div>
        </LayoutTemplate>

        <ItemTemplate>            
            <div class="list_image">
                <img alt="" src='<%# "Styles/Images/" + Eval("category_icon") %>' height="32" width="32" />
            </div>
            <div class="list_item_large ">
                <a href='sCategories.aspx?cat_id=<%# Eval("category_id")%>'><%# Eval("Cat_title")%></a>
            </div>               
        </ItemTemplate>
        <ItemSeparatorTemplate>
            <div>
            </div>
        </ItemSeparatorTemplate>
        <EmptyDataTemplate>
            <div>
                <img alt="" src="Styles/Images/ic_lw.png" height="48" width="48" />
            </div>
            <div>
                <b>No Categories Found</b>
            </div>               

        </EmptyDataTemplate>
    </asp:ListView>
</td>

</tr>
</table>

Answer 1

您可以将.lv_table样式width更改为100%，并将.list_view样式设为width:33%;并删除所有内联width:500px;您的LayoutTemplates中的<div>。

CSS的宽度为asp：ListView

1 个答案: