ASP.NET：设置 Label 控件的样式时出现奇怪的输出答案

【问题标题】：ASP.NET: I'm getting strange output when styling a Label controlASP.NET：设置 Label 控件的样式时出现奇怪的输出
【发布时间】：2010-06-01 16:32:32
【问题描述】：

.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 标头标记。第一个标签使用 css 设置样式，第二个标签使用标签的内联属性（两个标签具有相同的样式）。但是第一个标签没有正确输出，它的边框被破坏了。如果我用普通的“Hello world”文本替换第一个标签的标记，它会正确呈现，但是当我使用标记时它会再次中断。有人可以解释为什么会这样吗？

【问题讨论】：

真正让我失望的是，第二个 Label 以我想要的方式完美输出。当我使用 css 而不是内联样式时，标签周围的边框会中断。

标签： asp.net css

【解决方案1】：

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

你应该把你的h1标签放在标签控件的外面，然后也许用一个文字控件代替——像这样：

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

请注意，如果您愿意，您也可以轻松地将内联样式应用于 h1...不过，我不推荐内联样式。

【讨论】：

如果采用这种方法，<h1> 标签也需要display:inline-block，否则它将占用其包含元素的整个宽度。
实际上，我很可能会将
标签放在标签周围，而不是相反。现在，我正在阅读这本解释如何使用 Label 控件的书，它说可以为 Label 分配纯文本或 HTML。所以当我遇到这个问题时，我正在测试它。让我失望的是我的代码示例中的第二个标签有效。还没用过Literal控件，刚开始用Asp.net...

【解决方案2】：

将此添加到您的 CSS：

display:inline-block;

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

顺便说一句，通过在Firebug 中提出，我能够很快发现应用于 2 个标签（跨度标签）的样式之间的差异。

【讨论】：

【解决方案3】：

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

【讨论】：

<asp:Label> 呈现为 <label> 如果标签上有 AssociatedControlID 属性，但它呈现为 <span> 否则。
Joel Coehoorn 的回答非常相似，这取决于您打算采取哪种方法。如果要关闭标题等，请使用面板。如果您只想设置文本，请在 h1 中使用文字。

【解决方案4】：

span-元素（这是 asp:Label 输出的）是内联元素，不能包含像 h1 这样的块级元素。这可能是它崩溃的原因。

【讨论】：