CSS没有在中继器内格式化答案

【问题标题】：CSS Not formatting inside repeaterCSS没有在中继器内格式化
【发布时间】：2018-12-13 13:47:06
【问题描述】：

我正在尝试在中继器中使用 css。当我运行它时，没有格式化。但是，当我在中继器之外使用 css 时，它的格式很好。

<style>
   body {
       background-color:lightgray
   }
   .messageBox p  {
        background-color:white;
        width: 25%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
   }
</style>

外接中继器

<div class="messageBox">
  <p>The quick brown fox jumped over the lazy dog</p>
  <p>The quick brown fox jumped over the lazy dog</p>
  <p>The quick brown fox jumped over the lazy dog</p>
  <p>The quick brown fox jumped over the lazy dog</p>
  <p>The quick brown fox jumped over the lazy dog</p>
</div>

中继器内部

<asp:Repeater ID="myRepeater" runat="server">
    <ItemTemplate>
        <br />
        <div class="messageBox">
            <p>
                <%# Eval("Message") %>                            
            </p>
        </div>
    </ItemTemplate>
</asp:Repeater>

【问题讨论】：

检查页面并查看转发器是否正在生成具有正确名称的 div 类 'messagebox'。

标签： c# css asp.net

【解决方案1】：

您需要将<div class="messageBox"> 移动到HeaderTemplate 或转发器之前，并关闭</div> 到FooterTemplate 或转发器末尾。

最终结果应如下所示：

<asp:Repeater ID="myRepeater" runat="server">
    <HeaderTemplate>
        <div class="messageBox">
    </HeaderTemplate>
    <ItemTemplate>
        <br />
        <p>
            <%# Eval("Message") %>                            
        </p>
    </ItemTemplate>
    <FooterTemplate>
        </div>
    </FooterTemplate>
</asp:Repeater>

或：

<div class="messageBox">
    <asp:Repeater ID="myRepeater" runat="server">       
        <ItemTemplate>
            <br />
            <p>
                <%# Eval("Message") %>                            
            </p>
        </ItemTemplate>     
    </asp:Repeater>
</div>

我喜欢第一种方法，因为如果没有数据，它不会留下空的div 元素。

【讨论】：