由于单选按钮,相邻分隔符中的文本没有对齐?

下面是我的页面中的一项,它由包含两个并排div的div组成。其中第一项是大纲中某个条目的大纲编号,第二项是大纲中该条目的内容。控件的contentpanel div可以包含许多不同的内容,通常是一些文本与单个输入控件配对。对于文本框,我遇到了一个问题,即文本框的字体样式不是继承的,因此它的字体更大,因此行高更大,因此与文本框位于同一个分区中的文本使用的行高更大。但是,包含大纲编号文本的第一个分区中的行高较小,因此与文本框配对的跨度中的文本与大纲编号中的文本不对齐。我通过把两个凹坑的线高提高到22像素来解决这个问题。

这是可行的,但现在当我有一个单选按钮时,我又遇到了另一个问题,因为输入按钮的计算高度是13px,同一个分区中的文本向下移动了几个像素,不与大纲文本对齐。如果我把单选按钮的高度降低到11px,问题就解决了。如果我把它变大,问题就更严重了,这样带有单选按钮的文本就在按钮的底部对齐,并且低于大纲数字文本。我尝试将CSS类应用于RadioButton控件,该控件将其高度设置为11px,但问题是SPAN标记获取类,嵌套的输入标记不继承高度。我正在开发一个服务器控件,我想使用CSS,它不会全局地影响页面上的所有单选按钮,而是只影响我生成的单选按钮。所以我希望使用CSS类,但它不会影响单选按钮本身,因为ASP.NET正在span标记上呈现CSS类而不是输入标记。因此,要么寻找一种将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>