ASP.NET: я получаю странный вывод при стилизации элемента управления Label

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>

Hello. В приведенном выше примере кода у меня есть 2 элемента управления Label, содержимое которых установлено в тег заголовка h1. Первая метка оформляется с использованием css, а вторая со встроенными свойствами метки (обе метки имеют идентичный стиль). Но первая метка не выводится должным образом, ее граница нарушена. Если я заменю первую разметку Label простым текстом «Hello world», он будет отображаться правильно, но он снова ломается, когда я использую разметку. Может кто-нибудь объяснить, почему это происходит?

Answer 1

Вы делаете недействительным HTML. По умолчанию элементы управления Label помещают свое содержимое в html-тег метки span или label, поэтому теперь, когда вы помещаете теги h1 в метку, у вас есть элемент block внутри встроенного элемента, что недопустимо.

Вам следует обернуть теги h1 снаружи элементом управления label, а затем, возможно, использовать вместо него буквальный элемент управления & mdash; как это:

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

Обратите внимание, что вы также можете легко применять встроенные стили к h1, если хотите ... но я не рекомендую встроенные стили.

Answer 2

Добавьте это к своему CSS:

display:inline-block;

Очевидно, Asp.Net добавляет этот стиль CSS для вас, когда вы используете встроенные стили на ярлыке.

Кстати, мне удалось очень быстро определить разницу между стилями, примененными к двум меткам (тегам span), подняв его в Firebug .

Answer 3

Метка - это неправильный элемент управления, используемый здесь, поскольку он отображает HTML <label>, который определяет метку для элемента ввода . Было бы более разумно использовать панель, которая будет отображаться как <div>.

Answer 4

A span -элемент (который выводит asp: Label) является встроенным элементом и не может содержать элементы уровня блока, такие как h1. Это может быть причиной его поломки.