Question

我正在尝试学习CSS3并远离使用表格标签。在asp.net项目中使用Visual Studio 2010，.net 4.0和vb.nt。我有一个listview，我正试图让行换成颜色。我有什么工作，但只是部分。渲染到屏幕的内容是包含文本的多行。阴影仅影响屏幕上的一条小线..它不会覆盖整行。这是代码：

div.row
{
    clear: both;
    padding-top: 5px;
}

div.row:nth-child(1n+3)
{
    background-color: #C0C0C0;
}


div.row span.label
{
    float: left; /*width: 100px;*/
    text-align: right;
    padding-right: 5px;
    font-weight: bold;
}

div.row span.cell
{
    float: left; /*width: 335px;*/
    text-align: left;
}

这是标记：

<ItemTemplate>
            <div class="row" >
                <span class="cell" style="width: 200px;">
                    <asp:HyperLink ID="lblCalendarDataID" runat="server" NavigateUrl='<%# "CalendarAddEdit.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
                        Text='<%# databinder.eval(container.dataitem,"Title")%>' />
                </span>
                <span class="cell" style="width: 150px;">
                    <asp:Label ID="lblStartDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartDate1","{0:d}")%>' />
                    -
                    <asp:Label ID="lblEndDate1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndDate1","{0:d}")%>' />
                </span>
                <span class="cell" style="width: 150px;">
                    <asp:Label ID="lblStartTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"StartTime1", "{0:t}")%>' />
                    -
                    <asp:Label ID="lblEndTime1" runat="server" Text='<%# databinder.eval(container.dataitem,"EndTime1", "{0:t}")%>' />
                </span>
                <span class="cell" style="width: 350px;">
                    <asp:Label ID="lblDescription" runat="server" Text='<%# databinder.eval(container.dataitem,"Description")%>' />
                </span>
                <span class="cell" style="width: 50px;">
                    <asp:HyperLink ID="hlDeleteID" runat="server" NavigateUrl='<%# "CalendarDelete.aspx?ID=" & databinder.eval(container.dataitem,"CalendarDataID")%>'
                        Text="Delete" />
                </span>
            </div>
        </ItemTemplate>

任何人都知道我做错了什么。我试图使用alternatingItemTemplate，但无法让它变暗。在那个senerio ..我做了一个

<div class="row" style="background-color: #C0C0C0;">

任何帮助都会很棒。

Answer 1

要让背景着色符合您的要求，请尝试修改此样式：

div.row:nth-child(1n+3)
{
    background-color: #C0C0C0;
}

是这样的：

div.row:nth-child(1n+3) span
{
    background-color: #C0C0C0;
}

将背景颜色实际应用于包含内容的跨度。

css，asp：listview和nth-child

1 个答案: