HTML / CSS의 라디오 / 체크 박스 정렬 <td><input type=”radio” name=”opt”></td>

라디오 버튼 / 체크 박스를 텍스트와 올바르게 정렬하는 가장 깨끗한 방법은 무엇입니까? 지금까지 사용해온 유일한 신뢰할 수있는 솔루션은 테이블 기반입니다.

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

이것은 일부 사람들에게 눈살을 찌푸 릴 수 있습니다. 테이블없는 솔루션을 조사하는 데 시간을 (다시) 보냈지 만 실패했습니다. 수레, 절대 / 상대 위치 및 유사한 접근 방식의 다양한 조합을 시도했습니다. 라디오 버튼 / 체크 박스의 예상 높이에 대부분 조용히 의존 할뿐만 아니라 브라우저마다 다르게 작동합니다. 이상적으로는 크기 또는 특수한 브라우저 특성에 대해 전혀 가정하지 않는 솔루션을 찾고 싶습니다. 나는 테이블을 사용하는 것은 좋지만 다른 해결책이 어디에 있는지 궁금합니다.



답변

나는 마침내 문제를 해결했다고 생각합니다. 일반적으로 권장되는 솔루션 중 하나는 vertical-align : middle :

<input type="radio" style="vertical-align: middle"> Label

그러나 문제는 이론적으로는 작동해야하지만 여전히 가시적 인 정렬 불량이 발생한다는 것입니다. CSS2 사양은 다음과 같이 말합니다.

vertical-align : middle : 상자의 수직 중간 점을 부모 상자의 기준선에 부모의 x 높이의 절반을 더한 위치에 정렬합니다.

따라서 완벽한 중심에 있어야합니다 (x 높이는 문자 x의 높이입니다). 그러나 문제는 브라우저가 일반적으로 라디오 버튼과 확인란에 임의의 고르지 않은 여백을 추가한다는 사실 때문에 발생하는 것으로 보입니다. 예를 들어 Firebug를 사용하는 Firefox에서 Firefox의 기본 확인란 여백이 3px 3px 0px 5px. 어디에서 왔는지는 모르겠지만 다른 브라우저에서도 비슷한 여백이있는 것 같습니다. 따라서 완벽한 정렬을 얻으려면 다음 여백을 제거해야합니다.

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

테이블 기반 솔루션에서 여백이 어떻게 든 먹고 모든 것이 잘 정렬된다는 점은 여전히 ​​흥미 롭습니다.


답변

다음은 Firefox 및 Opera에서 작동합니다 (죄송합니다. 현재 다른 브라우저에 액세스 할 수 없습니다).

<div class="form-field">
    <input id="option1" type="radio" name="opt"/>
    <label for="option1">Option 1</label>
</div>

CSS :

.form-field * {
    vertical-align: middle;
}


답변

레이블, div 등을 추가 할 필요가 없기 때문에 가장 쉽고 가장 쉬운 방법은이 방법입니다.

input { vertical-align: middle; margin-top: -1px;}


답변

나는 이것을 위해 테이블을 전혀 사용하지 않을 것입니다. CSS는 이것을 쉽게 할 수 있습니다.

나는 다음과 같이 할 것입니다.

   <p class="clearfix">
      <input id="option1" type="radio" name="opt" />
      <label for="option1">Option 1</label>
   </p>

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

참고 : http://www.positioniseverything.net/easyclearing.html 에서 clearfix 클래스를 사용했습니다 .

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


답변

이것은 약간의 해킹이지만이 CSS는 테이블을 사용하는 것과 동일하게 모든 브라우저에서 매우 잘 작동하는 것 같습니다 (크롬 제외)

input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
 input[type=radio] { margin-top: -2px; }
}

작동하려면 라디오에 레이블을 사용하십시오. 즉

<option> <label>My Radio</label>


답변

레이블이 길고 여러 행으로 진행되는 경우 너비 및 display : inline-block을 설정하면 도움이됩니다.

.form-field * {
  vertical-align: middle;
}
.form-field input {
  clear:left;
}
.form-field label {
  width:200px;
  display:inline-block;
}

<div class="form-field">
    <input id="option1" type="radio" name="opt" value="1"/>
    <label for="option1">Option 1 is very long and is likely to go on two lines.</label>
    <input id="option2" type="radio" name="opt" value="2"/>
    <label for="option2">Option 2 might fit into one line.</label>
</div>


답변

이에 대한 최선의 해결책은 입력에 레이블과 일치하는 높이를 제공하는 것입니다. 적어도 이것은 Firefox와 IE의 불일치 문제를 해결했습니다.

input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }

<li>
  <input id="option1" type="radio" name="opt" />
  <label for="option1">Option 1</label>
</li>