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

Question

下面是我页面中的一个项目，它由包含两个并排 div 的 div 组成。其中第一项是大纲中条目的大纲编号，其右侧的第二项是大纲中该条目的内容。 Controls_ContentPanel div 可以包含许多不同的内容，通常是一些文本与单个输入控件配对。在文本框的情况下，我遇到的问题是文本框的字体样式没有被继承，所以它的字体更大，因此行高更大，因此与文本框相同的 div 中的文本使用更大的行高。然而，包含大纲编号文本的第一个 div 中的 line-height 较小，因此与文本框配对的 span 中的文本与大纲编号中的文本不对齐。我通过将两个 div 的 line-height 提升到 22px 来解决这个问题。

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

尝试将 CSS 类应用于单选按钮控件的简化代码 sn-p，但生成的 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>

编辑，我尝试直接将 line-height 添加到跨度，作为测试，但没有运气。根据萤火虫他们已经继承了行高，但我直接应用它只是为了确保它对对齐没有任何改进：

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