라디오 버튼 옆에 텍스트를 표시하는 방법은 무엇입니까?

라디오 버튼에 대해 질문이 있습니다. 아래에 HTML 코드와 CSS 코드가 있지만 두 개의 라디오 버튼이 있고 각 라디오 버튼 옆에 텍스트가 있습니다. 첫 번째 라디오 버튼은 "Male"을 나타내고 다른 라디오 버튼은 "Female"을 나타냅니다.라디오 버튼 옆에 텍스트를 표시하는 방법은 무엇입니까?

이제 "Male"은 라디오 버튼 옆에 표시되지만 라디오 버튼 아래에는 "Female"가 표시됩니다. 전체 라디오 버튼과 텍스트가 저장되는 테이블을 만들면 "Male"과 "Female"이 라디오 버튼 아래에 표시되고 옆에는 표시되지 않습니다.

제 질문은 "남성"과 "여성"라디오 버튼 옆에 표시하려면 내 CSS/HTML 코드에서 변경해야 할 것이 무엇입니까? 그들은 더 나은 접근성과 상관 관계를 가지고 있기 때문에,

#replies{ 
    display:inline-block; 
    vertical-align:top; 
    min-width:15%; 
    max-width:15%; 
} 

#replies th{ 
    border-collapse:collapse; 
    border:1px solid black; 
} 

#replies td{ 
    border-collapse:collapse; 
    border:1px solid black; 
    padding:1%; 
}

출처

2012-05-28 user1394925

당신은 단순히 열 너비를 설정하면 작동 것이 주어진, "DIV"에 대한 표시 모드를 변경하려면 CSS 코드

.replytd 
{ 
float:left; 
}

출처

2012-05-28 01:05:29

내가 대신 <span> 태그의 <label> 태그를 사용합니다 : 아래

<table id="replies"> 
<tr> 
    <th colspan="2"> 
    Replies 
    </th> 
</tr> 
<tr> 
<td>Gender: </td> 
<td align="left"> 
<div class="replytd"> 
<input type="radio" name="reply" value="male" class="replyBtn" /><span class="replyspan">Male</span> 
</div> 
<div class="replytd"> 
<input type="radio" name="reply" value="female" class="replyBtn" /><span class="replyspan">Female</span> 
</div> 
</td> 
</tr> 
</table>

가 CSS 코드 : 아래

는 HTML 코드입니다 <input> 요소로

출처

2012-05-28 01:01:40 Ian

white-space:nowraphelps이를 추가 할 수 있지만 약간의 과잉이 될 수

그 슬프게도 더 정확한 접근법은 화면 판독기 등으로 올바르게 인식되고 의미 론적 목적을 달성하는 <label> 요소를 사용하는 것입니다.

<label><input type="radio" name="reply" value="male" class="replyBtn" />Male</label>

출처

2012-05-28 01:05:34

처럼, 부모 인 경우 라벨 요소 당신은 내용을 포장하기 시작 있도록 내용을 수용하는 것만으로는 충분하지 않습니다 max-width:15%;을 설정 입력을 연결 (A for 특성이없는) 암시가 될 수 있습니다. max-width을 늘리거나 제거하십시오.

출처

2012-05-28 01:10:00 Helstein

라디오 버튼 옆에 텍스트를 표시하는 방법은 무엇입니까?

답변

관련 문제