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类应用于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>

Answer 1

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

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

1 个答案: