Ниже находится один элемент на моей странице, который состоит из элемента div, содержащего два элемента div рядом друг с другом.Первый из них - это номер схемы для записи в схеме, а второй элемент справа от нее - содержание этой записи в схеме.Div элемента Controls_ContentPanel может содержать много разных вещей, часто некоторый текст в паре с одним элементом управления вводом.В случае текстового поля у меня была проблема в том, что стили шрифта текстового поля не были унаследованы, и поэтому его шрифт был больше, и, следовательно, высота строки была больше, и, таким образом, текст в том же div, что и текстовое поле, использовалбольшая высота линии.Однако высота строки в первом элементе div, содержащем текст номера контура, была меньше, и поэтому текст в диапазоне, который был связан с текстовым полем, не был выровнен с текстом в номере контура.Я исправил это, увеличив высоту строки обоих div до 22 пикселей.
Это работает, но теперь у меня есть другая проблема, когда у меня есть переключатель, потому что вычисленная высота кнопки ввода составляет 13 пикселей, а текст втот же элемент перемещается на несколько пикселей вниз и не совпадает с текстом контура.Если я уменьшу высоту переключателя до 11px, это решит проблему.Если я увеличу его, это усугубит проблему, так что текст с переключателем будет выровнен внизу кнопки и будет меньше текста наброска.Я попытался применить класс CSS к контроллеру RadioButton, который устанавливает его высоту 11px, но проблема в том, что тег span получает класс, а вложенный тег input не наследует высоту.Я разрабатываю серверный элемент управления и хочу использовать CSS, который влияет не на все переключатели на странице, а только на переключатели, которые я генерирую.Поэтому я надеялся использовать класс Css, но он не влияет на саму кнопку-переключатель, поскольку ASP.NET отображает класс css в теге span вместо тега input.Так что либо ищите хороший способ применить класс css к входному тегу из моего кода C #, либо какой-то другой способ заставить текст в обоих div'ах выравниваться согласованно.
Упрощенный фрагмент кода, пытающийся применить CSSкласс для управления переключателем, но сгенерированный html вместо этого применяет класс css к тегу span:
RadioButton radioButton = new RadioButton();
radioButton.CssClass = "Controls_RadioButtonInput";
this.Controls.Add(radioButton);
Мой файл CSS:
/*The first three indent levels*/
.Controls_IndentLevel0
{
font-weight: bold;
font-size: 12pt;
}
.Controls_IndentLevel1
{
font-weight: bold;
font-size: 10pt;
}
.Controls_IndentLevel2
{
font-weight: normal;
font-size: 8pt;
}
/*The div tag that contains each node*/
.Controls_NodePanel
{
clear: both;
font-family: MS Sans Serif;
font-weight: normal;
/*font-size: 8pt;*/
font-style: normal;
line-height: 22px;
border: 1px;
margin: 3px;
}
/*The div tag that contains the outline number*/
.Controls_OutlineNumberPanel
{
float: left;
line-height: 22px;
}
/*The div tag that contains the content of a node, such as a label and textbox, a table, or any of the other controls we've implemented.*/
.Controls_ContentPanel
{
float: left;
line-height: 22px;
}
/*Trying to fix a text alignment issue caused by large radio buttons*/
.Controls_RadioButtonInput
{
height: 11px;
}
Сгенерированный HTML:
<div style="margin-left: 60px;" class="Controls_NodePanel Controls_IndentLevel2" id="ID_1__10">
<div class="Controls_OutlineNumberPanel" id="ID_1__10_0">
<span id="ID_1__10_0_0">XIV.</span>
</div>
<div class="Controls_ContentPanel" id="ID_1__10_1">
<div id="ID_1__10_1_0">
<span disabled="disabled" class="Controls_RadioButtonInput">
<input type="radio" disabled="disabled" value="ID_1__10_1_0_0" name="a" id="ID_1__10_1_0_0">
</span>
<span id="ID_1__10_1_0_1">
text here for radio button selection
</span>
</div>
</div>
</div>
Правка, я попытался добавить высоту строки к пролетам напрямую, в качестве теста, но безуспешно.По словам Firebug, они уже наследовали высоту строки, но я применил ее непосредственно, чтобы убедиться, и это не улучшило выравнивание:
<div style="margin-left: 60px;" class="Controls_NodePanel Controls_IndentLevel2" id="ID_1__6">
<div class="Controls_OutlineNumberPanel" id="ID_1__6_0">
<span id="ID_1__6_0_0" style="line-height: 22px;">non0005</span>
</div>
<div class="Controls_ContentPanel" id="ID_1__6_1">
<div id="ID_1__6_1_0">
<span disabled="disabled" class="Controls_RadioButtonInput" style="line-height: 22px;">
<input type="radio" disabled="disabled" value="ID_1__6_1_0_0" name="a" id="ID_1__6_1_0_0">
</span>
<span id="ID_1__6_1_0_1" style="line-height: 22px;">
Competitive HC Only [Competitive 4% and/or 9% Housing Credits]
</span>
</div>
</div>
</div>