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

【问题标题】：Apply css to divs inside the DataList in asp.net将 css 应用于 asp.net 中 DataList 内的 div
【发布时间】：2014-07-21 04:53:50
【问题描述】：

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

<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。它不适用于数据列表中的 div。

编辑这是我的CSS

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

【问题讨论】：

能否请您发布一些 CSS？
这是什么版本的 .net？
我使用的dotnet版本是4.5

标签： css asp.net datalist

【解决方案1】：

DataList 默认呈现的 html 是 Table。这就是为什么你的 CSS 不工作的原因。如果你不想要表格样式，试试Repeater这个css就可以了。

【讨论】：

所以不可能从外部样式表中为 datalist 中的那些 div 调用 div class/id或者直接在div里面插入样式<div style=" ">.
@user35 因为，它将是 css 继承。你的另一种风格会导致这种变化。因此，您尝试在 firbug 中检查 html 和样式并修复它。尝试使用中继器。您可以从样式表控制所有样式。没有干扰。

【解决方案2】：

请试试这个。

像这样在您的 Masterpage 的 Head 部分放置一个 ContentPlaceHolder；

<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 中，将外部 CSS 文件的链接放在 head 部分的占位符中，如下所示；

<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>

【讨论】：

对不起，我实际上是在尝试各种可能的方式。我没有在 Datalist 中定义它。这只是一个实验。删除它也不起作用。至于使用内联样式有效，但问题是我希望它在 aspx 页面之外。
嗯，好的。是的，我知道您希望在页面之外使用 CSS，我只是将 HEAD 放入以进行说明，但我让它与外部样式表一起使用。
还有另一个信息...我在此页面中没有标题部分，因为它继承了母版页。它只有一个内容占位符。是的，我可以将链接放在内容占位符内，或者我可以包含链接在母版页中，但两者都不起作用。