由于单选按钮，邻域div中的文本未对齐？

Question

以下是我的网页中的一个项目，它包含两个并排div的div。第一个是大纲条目的大纲编号，右边的第二个条目是大纲中该条目的内容。 Controls_ContentPanel div可以包含许多不同的东西，通常一些文本与单个输入控件配对。在文本框的情况下，我遇到了一个问题，即文本框的字体样式没有被继承，所以它的字体较大，因此行高较大，因此与文本框相同的div中的文本使用了更大的线条高度。但是，包含轮廓数字文本的第一个div的行高较小，因此跨度中与文本框配对的文本与大纲数字中的文本不一致。我通过将这两个div的行高增加到22px来解决这个问题。

这是有效的，但现在我有另一个问题，当我有一个单选按钮时，因为输入按钮的计算高度是13px，并且同一div中的文本向下移动几个像素，并且不与大纲文本对齐。如果我将单选按钮的高度降低到11px，它可以解决问题。如果我将它放大，它会使问题变得更糟，使单选按钮的文本与按钮的底部对齐，并且低于大纲编号文本。我尝试将一个CSS类应用于RadioButton控件，该控件将其高度设置为11px，但问题在于span标记获取类，并且嵌套的输入标记不会继承高度。我正在开发一个服务器控件，我想使用不会全局影响页面上所有单选按钮的CSS，但只使用我生成的单选按钮。所以我曾希望使用Css类，但它并不影响单选按钮本身，因为ASP.NET在span标记而不是输入标记上呈现css类。因此，要么寻找一种很好的方式将css类应用于来自C＃代码的输入标记，要么以其他方式使两个div中的文本保持一致。

简化的代码片段尝试应用CSS类单选按钮控制，但生成的HTML应用CSS类跨度标签来代替：

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> 

编辑，我试着直接添加行高到span，作为tes吨，没有运气。据萤火他们已经继承了行高，但我申请直接，以确保公正，这对对齐没有改善：

<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> 

Answer 1

尝试使内跨度具有相同的行高度div（22px），然后将vertical-align设置为middle。