Question

.labelOne { border-width:thin;
            border-style:solid;
            border-color:Red;
            background-color:Silver; }

<asp:Label ID="Label1" runat="server" CssClass="labelOne">
    <h1>Hello world</h1>
</asp:Label>

<br /><br />

<asp:Label ID="Label2" runat="server"
           BorderColor="Black"
           BorderStyle="Solid"
           BorderWidth="1px"
           BackColor="Silver">
    <h1>Hello world</h1>
</asp:Label>

您好。在上面的代码示例中，我有2个Label控件，其内容设置为h1标头标记。第一个Label使用css设置样式，第二个Label使用Label的内联属性（两个标签具有相同的样式）。但是第一个Label没有正确输出，它的边框被打破了。如果我用普通的“Hello world”文本替换第一个Label的标记，它会正确呈现，但是当我使用标记时它会再次中断。有人可以解释为什么会这样吗？

Answer 1

你正在渲染无效的HTML。标签控件默认将其内容放在span或label html标记内，所以现在当你在标签中放入h1标签时，你在内联元素中有一个block元素，这是无效的。

你应该将你的h1标签包装在标签控件之外，然后使用文字控件 - 比如：

<h1 class="LabelOne"><asp:Literal ID="Label2" runat="server">
    Hello world
</asp:Literal></h1>

请注意，如果您愿意，也可以轻松地将内联样式应用于h1 ...但不是我建议使用内联样式。

Answer 2

将此添加到您的CSS：

display:inline-block;

显然，当您在标签上使用内联样式时，Asp.Net会为您添加css样式。

顺便说一句，我能够通过在Firebug中提升它来快速发现应用于2个标签（span标签）的样式之间的差异。

Answer 3

标签是在此处使用的错误控件，因为它呈现html <label>，defines a label for an input element。使用一个将呈现为<div>的面板更有意义。

Answer 4

span - 元素（asp：Label输出）是一个内联元素，不能包含像h1这样的块级元素。这可能是它破裂的原因。

ASP.NET：在设置Label控件的样式时，我得到了奇怪的输出

4 个答案: