c# - 中继器内的语音气泡

Question

上面是我将 .speech_bubble_content 的 bg 颜色更改为红色时渲染的 css 图像。气泡未正确显示。

我正在使用以下代码从数据库中检索数据并将其绑定(bind)到转发器。我还使用 css 在我想显示的内容周围显示一个对话框。我注意到当我在 div 外部放置标签时显示数据 - 当标签在 div 内部时没有检索到任何内容 - 在这种情况下显示创建日期，但省略了故事。为什么会这样？感谢您的帮助。我相信这是由 css 引起的。

<asp:Repeater ID="Repeater1" runat="server">

   <ItemTemplate>

    <div class="speech_bubble">
    <b class="sb1"></b><b class="sb2"></b><b class="sb3"></b><b class="sb4"></b><b class="sb5"></b><b class="sb6"></b><b class="sb7"></b>
    <div class="speech_bubble_content">
    <p>

    <asp:Label ID="story" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Story") %>'></asp:Label>


    </p>

    </div>
    <b class="sb7"></b><b class="sb6"></b><b class="sb5"></b><b class="sb4"></b><b class="sb3"></b><b class="sb2"></b><b class="sb1"></b>
    <em></em><span></span>
    </div>
    <asp:Label ID="user" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CompanyRole") %>'></asp:Label>&nbsp;<asp:Label ID="date" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "CreationDate") %>'></asp:Label>

    </ItemTemplate>
   </asp:Repeater>

这是 CSS:

.speech_bubble{
background: transparent;
margin:10px 0;
}
.speech_bubble_content{
display:block; 
background:#fff; 
border:3px solid #ddd; 
border-width:0 3px;
}
.speech_bubble p{
padding:0.5em 0; 
color:#000;
margin:0 15px; 
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6, .sb7{
display:block; 
overflow:hidden; 
font-size:0;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6{
height:1px;
}
.sb4, .sb5, .sb6, .sb7{
background:#fff; 
border-left:1px solid #ddd; 
border-right:1px solid #ddd;
}
.sb1 {margin:0 8px; background:#ddd;}
.sb2 {margin:0 6px; background:#ddd;}
.sb3 {margin:0 4px; background:#ddd;}
.sb4 {margin:0 3px; background:#fff; border-width:0 5px;}
.sb5 {margin:0 2px; background:#fff; border-width:0 4px;}
.sb6 {margin:0 2px; background:#fff; border-width:0 3px;} 
.sb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;} 

.speech_bubble em{
display:block; 
width:0; 
height:0; 
overflow:hidden; 
border-top:12px solid #ddd; 
border-left:12px dotted transparent; 
border-right:12px dotted transparent; 
margin-left:50px;
}
.speech_bubble span{
display:block; 
width:0; 
height:0; 
overflow:hidden; 
border-top:10px solid #fff; 
border-left:10px dotted transparent; 
border-right:10px dotted transparent; 
margin-left:52px; 
margin-top:-15px;
}

Answer 1

是的，按照雷内的建议去做。查看源代码，HTML 复制它和 CSS 并保存到 http://jsbin.com/并将链接发回此处，以便我们可以看到 .NET 生成的真实 html。

你可能也只是想拥有

<%#DataBinder.Eval(Container.DataItem, "Story") %>

不要使用 asp:label，因为它会添加不需要的 HTML 标签。