Часто, помещая серверный контрол на веб страницу, мы получаем несуразное размещение сопутствующего текста. Например, это явно наблюдается в контролах, которые имеют визуальное текстовое описание.
Если мы поместим на страницу несколько таких контролов (RadioButton, CheckBox):
<asp:RadioButton ID="RadioButton1"
runat="server" Text="Включить опцию" />
<asp:CheckBox ID="CheckBox1"
runat="server" Text="Задать опцию" />
То получим следующее представление в браузере:
Как видим, текстовая часть контролов как бы смещена вниз, что не всегда допустимо в дизайне страницы.
Решить данную проблему можно использовав дополнительный контрол Label. Однако, не очень то и просто выровнять несколько контролов, при этом удерживать их вместе.
Более простым и правильным решением будет назначить данным элементам соответствующий стиль. Но какой? Для этого посмотрим, что мы получаем в браузере относительно данных двух контролов:
<input id="RadioButton1" type="radio"
name="RadioButton1" value="RadioButton1" />
<label for="RadioButton1">Включить опцию</label>
<input id="CheckBox1" type="checkbox" name="CheckBox1" />
<label for="CheckBox1">Отметить опцию</label>
Как видим, серверные контролы <asp:RadioButton />и <asp:CheckBox /> представлены парами типами <input /> и <label />.
Соответственно, выравнивать следует лейбл в паре.
Style.css
body {}
.myClass label
{
display: block;
margin: -19px 0px 0px 20px;
}
<asp:RadioButton ID="RadioButton1" runat="server"
CssClass="myClass" Text="Включить опцию" />
<asp:CheckBox ID="CheckBox1" runat="server"
CssClass="myClass" Text="Отметить опцию" />
Так получили следующее представление в браузере:
А сама разметка приняла такой вид:
<span class="myClass">
<input id="RadioButton1" type="radio"
name="RadioButton1" value="RadioButton1" />
<label for="RadioButton1">Включить опцию</label>
</span>
<span class="myClass">
<input id="CheckBox1" type="checkbox" name="CheckBox1" />
<label for="CheckBox1">Отметить опцию</label>
</span>
Последнее замечание. Вы можете как угодно двигать генерируемые лейблы для серверных контролов, но обязательно в стилях оставляйте свойство display: block;