라디오 버튼으로 인해 인접 div의 텍스트가 정렬되지 않았습니까?

Question

다음은 내 페이지에서 하나의 항목으로 두 개의 side-by-side div가 포함 된 div로 구성됩니다. 첫 번째는 개요의 항목에 대한 개요 번호이며, 오른쪽의 두 번째 항목은 개요의 해당 항목의 내용입니다. Controls_ContentPanel div에는 여러 가지 항목이 포함될 수 있으며 대개 일부 텍스트는 단일 입력 컨트롤과 쌍을 이루고 있습니다. 텍스트 상자의 경우 텍스트 상자의 글꼴 스타일이 상속되지 않았기 때문에 글꼴이 더 크고 선의 높이가 더 크기 때문에 텍스트 상자와 같은 div에있는 텍스트가 큰 선 높이. 그러나 개요 번호 텍스트를 포함하는 첫 번째 div의 줄 높이가 작아서 텍스트 상자와 쌍을 이루는 범위의 텍스트가 개요 번호의 텍스트와 정렬되지 않았습니다. 두 div의 라인 높이를 22px까지 잭으로 고정했습니다.

입력 버튼의 계산 높이가 13 픽셀이고 동일한 div의 텍스트가 몇 픽셀 아래로 이동하고 개요 텍스트와 정렬되지 않기 때문에 라디오 버튼이있을 때 다른 문제가 발생합니다. . 라디오 버튼의 높이를 11px로 낮추면 문제가 해결됩니다. 크기를 크게하면 문제가 악화되어 라디오 단추가있는 텍스트가 단추의 아래쪽에 정렬되고 개요 번호 텍스트보다 낮아집니다. CSS 클래스를 11px 높이로 설정 한 RadioButton 컨트롤에 적용하려고 시도했지만 문제는 span 태그가 클래스를 가져오고 중첩 된 입력 태그가 높이를 상속받지 않는다는 것입니다. 서버 컨트롤을 개발 중이며 페이지에있는 모든 라디오 단추에 전역 적으로 영향을 미치지 않는 CSS를 사용하려고하지만 라디오 단추 만 생성합니다. 그래서 Css 클래스를 사용하고 싶었지만 ASP.NET이 입력 태그 대신 span 태그에 css 클래스를 렌더링했기 때문에 라디오 버튼 자체에는 영향을 미치지 않습니다. 그래서 내 C# 코드에서 입력 태그에 CSS 클래스를 적용하는 좋은 방법을 찾고 있거나 두 가지 div의 텍스트를 일관되게 정렬하는 다른 방법을 찾고 있습니다.

단순화 된 코드의 조각 라디오 버튼 컨트롤에 CSS 클래스를 적용하려고 노력하지만, 생성 된 HTML 대신에 span 태그에 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> 

편집, 테스 (tes) t, 운 없음. 방화범에 따르면 그들은 이미 라인 높이를 상속했다,하지만 난 그게 바로 바로 확인하기 위해 적용, 그것은 정렬에 아무런 개선이 없었다 :

<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

은 내부 스팬이 같은 줄 높이 등을 만드는 시도를 divs (22 픽셀)를 입력 한 다음 vertical-align을 middle으로 설정하십시오.