Question

如果我们可以将css应用于DataList内的div，我感到很困惑。我有一个样式表和一个继承母版页的aspx页面。母版页有一个contentplaceholder。内容占位符是我定义的地方我的DataList.Now我在datalist中有很多div需要样式。我如何从aspx页面本身给它们样式表样式表 NOT ，如<div style=" height:200px " >。它可以工作，但我需要定义样式表中的css不在aspx中。
这是我的datalist

<asp:Content ID="Content1" ContentPlaceHolderID="ccont" Runat="Server">
  <div id="ccont">
      <asp:DataList ID="mydatalist" ItemStyle-CssClass="lft_c_down"  runat="server">
        <ItemTemplate>
            <div id="lft_c">
                <div id="lft_c_top">
                   <asp:Image runat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"ipath")%>' Height="250px" Width="300px" />
                    <br/>
                </div>
                <div class="lft_c_down">
                   <b>Product Name:</b>
                   <asp:Label ID="lbl2" Text='<%#DataBinder.Eval(Container.DataItem,"products") %>' runat="server" />
                   <br/>
                   <b>brand:</b>
                   <asp:Label ID="lbl1" Text='<%#DataBinder.Eval(Container.DataItem,"brand") %>' runat="server" />
                   <br/>
                   <b>Price:</b>
                   <asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"price") %>' runat="server" />
                </div>
           </div>
        </ItemTemplate>
      </asp:DataList>

  </div>

正如你所看到我在contentplaceholder的开头有一个div，其id为ccont，我可以从样式表中应用css。它不适用于datalist中的div。

修改这是我的css

#lft_c_down
 {
   background-color:Aqua;
   color:Red;      
  }

Answer 1

DataList＆＃39; s默认呈现的html是Table。这就是为什么你的CSS没有工作的原因。如果您不想要桌面样式，请尝试使用Repeater这个css。

Answer 2

请试一试。

将ContentPlaceHolder放在主页的Head部分，如下所示;

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ccont" runat="server">        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

然后，在Webform中，将链接放在head section占位符中的外部CSS文件中，如下所示;

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="24857957.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ccont" runat="server">
        <div id="ccont">
      <asp:DataList ID="mydatalist" ItemStyle-CssClass="lft_c_down"  runat="server">
        <ItemTemplate>
            <div id="lft_c">
                <div id="lft_c_top">
                   <asp:Image runat="server" ImageUrl='http://placehold.it/140x140' Height="140px" Width="140px" />
                    <br/>
                </div>
                <div class="lft_c_down">
                   <b>Product Name:</b>
                   <asp:Label ID="lbl2" Text='<%#DataBinder.Eval(Container.DataItem,"product") %>' runat="server" />
                   <br/>
                   <b>brand:</b>
                   <asp:Label ID="lbl1" Text='<%#DataBinder.Eval(Container.DataItem,"brand") %>' runat="server" />
                   <br/>
                   <b>Price:</b>
                   <asp:Label ID="Label1" Text='<%#DataBinder.Eval(Container.DataItem,"price") %>' runat="server" />
                </div>
           </div>
        </ItemTemplate>
      </asp:DataList>
  </div>
</asp:Content>

将css应用于asp.net中DataList内的div

2 个答案: