맞추는 방법을 확인하고 그들의 라벨을 일관되게 크로스 브라우저

https://stackoverflow.com/questions/306252

08-07-2019
|

문제

이것은 하나의 작은 CSS 문제는 나를 괴롭히다.어떻게 사람들이 주변에 Stack Overflow 수직으로 정렬 checkboxes 과 그들의 labels 일관 크로스 브라우저?때마다 나는 그들을 정렬에서 올바르게 사파리(일반적으로 사용 vertical-align: baseline 에 input다),그들은 완전히 떨어져에서 Firefox/IE.그것을 해결 Firefox,Safari and IE 는 필연적으로 엉망입니다.나에 시간을 낭비 때마다 이것 저는 코드 형태입니다.

여기에는 표준 코드는 일:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

나는 일반적으로 사용하는 에릭 메이어의 다시 설정,그래서 형태 요소는 상대적으로 청소의 무시합니다.앞으로 찾고 어떤 조언이나 기술을 제공합니다!

해결책

후에는 시간 이상의 조정,테스트하고,다른 스타일의 태그,내가 생각하기에도 알맞은 솔루션입니다.에 대한 요구 사항 이 특정 프로젝트었:

입력에 있어야 합니다 자신의 라인입니다.
체크 박스 입력이 필요하 수직으로 정렬된 레이블 텍스트 마찬가지로(하지 않을 경우 동일하게)모든 브라우저입니다.
는 경우에 레이블 텍스트,그것은 필요하게 들여쓰기(그래서 아무도 감싸는 아래 checkbox).

내가 들어가기 전에 모든 설명,난 그냥 당신에게 코드:

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}
input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

여기에서 동작하는 예제에서 JSFiddle.

이 코드에서는 당신이 사용하는 재설정을 다음과 같 에릭 메이어의하지 않는 재정의 양식에 입력한 여백과 패딩(따라서 넣어진 패딩 재설정 입력에서 CSS).물론 실제 환경에서 당신은 아마다 중첩/재정의 물건을 지원하는 다른 요소를 입력하지만,나는 유지하고 싶었던 것들을 간단합니다.

참고하기:

이 *overflow 선입 인라인 IE 해킹(별성 해킹).모두 IE6 7 다는 것을 알 수 있지만,Safari,Firefox 것이 제대로 그것을 무시합니다.나는 그것이 유효하게 처리할 수 있습 CSS,하지만 당신은 여전히 더 좋은 조건부 의견;단지 그것을 사용해 단순합니다.
내가 말할 수 있는 최선을만 vertical-align 문을 통해 일관된 브라우저 vertical-align: bottom.설정이 다음 상대적으로 포지셔닝을 위쪽으로 행동하는 거의 동일하게 in Safari,Firefox,IE 만으로도 화소 또는 두 개의 차이가 있습니다.
주요 문제에서 작업으로 정렬하는 IE 지팡이 무리한 공간을 주위 입력이 요소입니다.그렇지 않은 패딩 또는 여백 그리고 그것은 저주 영구적입니다.설정의 너비와 높이에서 확인란을 선택하고 다음 overflow: hidden 어떤 이유로 인하 여분의 공간 및 수 있습 IE 의 위치하는 행위는 매우 유사하게 사파리와어 있습니다.
에 따라 텍스트 크기,당신은 의심의 여지가 조정이 필요한 상대적인 위치,너비,높이 및 등을 얻을 것을 찾는 옳습니다.

희망이 누군가가 도움이 됩니다.내가 시도하지 않은 이 특정한 기술에서 어떤 프로젝트를 다른 것보다 나는 이 일에 아침,그래서 확실히 관는 경우에 당신이 뭔가를 찾을 작동하는 더 일정하게 유지되었습니다.

다른 팁

때로는 수직 정렬에 제대로 작동하기 위해 서로 옆에 두 개의 인라인 (스팬, 레이블, 입력 등) 요소가 필요합니다. 다음 확인란은 텍스트 크기가 매우 작거나 큰 경우에도 IE, Safari, FF 및 Chrome의 수직 중앙에 올바르게 중앙에 있습니다.

그들은 모두 같은 줄에서 서로 옆에 떠 다니지 만 Nowrap은 전체 레이블 텍스트가 항상 확인란 옆에 머무는 것을 의미합니다.

단점은 추가 무의미한 스팬 태그입니다.

.checkboxes label {
  display: inline-block;
  padding-right: 10px;
  white-space: nowrap;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

이제 매우 긴 레이블 텍스트가 있다면 필요합니다 확인란 아래로 포장하지 않고 랩핑하려면 레이블 요소에 패딩과 부정적인 텍스트를 들여 쓰기를 사용합니다.

.checkboxes label {
  display: block;
  padding-right: 10px;
  padding-left: 22px;
  text-indent: -22px;
}
.checkboxes input {
  vertical-align: middle;
}
.checkboxes label span {
  vertical-align: middle;
}

<form>
  <div class="checkboxes">
    <label for="x"><input type="checkbox" id="x" /> <span>Label text x so long that it will probably wrap so let's see how it goes with the proposed CSS (expected: two lines are aligned nicely)</span></label>
    <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
    <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
  </div>
</form>

작업 하나의 크레용 솔루션, 나는 나를 위해 일하는 것이 있고 더 간단합니다.

.font2 {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

input[type=radio] { 
  bottom: 2px; 
}

<label><input type="checkbox" /> Label text</label>
<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

Safari (기준선이 신뢰하는)에서 픽셀-픽셀을 동일하게 렌더링하고 Firefox와 IE7은 모두 잘 확인합니다. 또한 크고 작은 다양한 레이블 글꼴 크기에도 적용됩니다. 이제 Selects and Inputs에서 IE의 기준선을 수정하기 위해 ...

업데이트: (타사 편집)

적절한 bottom 위치는 글꼴 가족과 글꼴 크기에 따라 다릅니다! 사용을 찾았습니다 bottom: .08em; Checkbox & Radio Elements는 좋은 일반적인 가치입니다. 여러 개의 소형/중간/큰 글꼴 크기를 사용하여 Arial & Calibri Fonts가있는 Windows에서 Chrome/Firefox/IE11에서 테스트했습니다.

.font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

input[type=checkbox], input[type=radio] {
  vertical-align: middle; 
  position: relative;
  bottom: .08em; /* this is a better value for different fonts! */
}

<label><input type="checkbox" /> Label text</label> 

<p class="font2">
  <label><input type="checkbox"/> Label text</label>
</p>

잘 작동하는 것 중 하나는 수직 정렬로 확인란의 수직 위치를 조정하는 것입니다. 여전히 브라우저마다 다르지만 솔루션은 복잡하지 않습니다.

input {
    vertical-align: -2px;
}

참조

노력하다 vertical-align: middle

또한 코드는 다음과 같은 것 같습니다.

<form>
    <div>
        <input id="blah" type="checkbox"><label for="blah">Label text</label>
    </div>
</form>

내 솔루션을 시도하고 IE 6, FF2 및 Chrome에서 시도해 보았으며 3 개의 브라우저 모두에서 픽셀로 픽셀을 렌더링합니다.

* {
  padding: 0px;
  margin: 0px;
}
#wb {
  width: 15px;
  height: 15px;
  float: left;
}
#somelabel {
  float: left;
  padding-left: 3px;
}

<div>
  <input id="wb" type="checkbox" />
  <label for="wb" id="somelabel">Web Browser</label>
</div>

저를위한 유일한 완벽한 솔루션은 다음과 같습니다.

input[type=checkbox], input[type=radio] {
    vertical-align: -2px;
    margin: 0;
    padding: 0;
}

Chrome, Firefox, Opera, IE 7 및 8에서 오늘 테스트했습니다. 예 : 예 : 깡깡이

정적 텍스트의 수직 위치를 조정하기 위해 일반적으로 선 높이를 사용합니다.

label {
  line-height: 18px;
}
input {
  width: 13px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
}

<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

도움이되기를 바랍니다.

솔루션을 완전히 테스트하지는 않았지만 잘 작동하는 것 같습니다.

내 html은 간단합니다.

<label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

그런 다음 모든 확인란을 설정했습니다 24px 높이와 너비 모두. 텍스트를 정렬하기 위해 라벨을 만듭니다. line-height 또한 24px 그리고 할당 vertical-align: top; 그렇게 :

편집하다: IE 테스트 후 나는 추가했다 vertical-align: bottom; 입력 및 레이블의 CSS를 변경했습니다. 패딩을 정렬하려면 조건부 IE CSS 케이스가 필요할 수 있지만 텍스트와 상자는 인라인입니다.

input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
}
label.checkbox {
    vertical-align: top;
    line-height: 24px;
    margin: 2px 0;
    display: block;
    height: 24px;
}

누군가가 작동하지 않는다는 것을 알게되면 친절하게 알려주세요. 다음은 작동 중입니다 (Chrome 및 IE에서는 스크린 샷이 망막에서 찍히고 IE에 대한 평행선을 사용하여 사과) : :

screenshot of checkboxes: Chrome screenshot of checkboxes: IE

나는 이것이 가장 쉬운 방법이라고 생각합니다

input {
    position: relative;
    top: 1px;
}

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
<form>

이것은 나에게 잘 작동합니다.

fieldset {
  text-align:left;
  border:none
}
fieldset ol, fieldset ul {
  padding:0;
  list-style:none
}
fieldset li {
  padding-bottom:1.5em;
  float:none;
  clear:left
}
label {
  float:left;
  width:7em;
  margin-right:1em
}
fieldset.checkboxes li {
  clear:both;
  padding:.75em
}
fieldset.checkboxes label {
  margin:0 0 0 1em;
  width:20em
}
fieldset.checkboxes input {
  float:left
}

<form>
  <fieldset class="checkboxes">
    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy" />
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry" />
        <label for="hungry">Hungry?</label>
      </li>
    </ul>
  </fieldset>
</form>

나는 상대적 포지셔닝이 마음에 들지 않습니다. 왜냐하면 요소가 레벨에서 다른 모든 것 이상으로 렌더링되기 때문입니다 (복잡한 레이아웃이있는 경우 무언가 위에 올 수 있음).

나는 그것을 발견했다 vertical-align: sub Checkbox를 크롬, 파이어 폭스 및 오페라에서 충분히 잘 정렬하게 보이게합니다. MacOS가없고 IE10이 약간 꺼져 있으므로 Safari를 확인할 수는 없지만 나에게 충분한 솔루션이라는 것을 알았습니다.

또 다른 솔루션은 모든 브라우저에 대해 특정 CSS를 만들고 %/픽셀/EMS의 수직 정렬로 미세 조정하는 것일 수 있습니다.http://css-tricks.com/snippets/css/browser-specific-hacks/

이제 Flexbox는 모든 현대식 브라우저에서 지원되었습니다. 이와 같은 것은 나에게 더 쉬운 접근 방식처럼 보입니다.

<style>
label {
  display: flex;
  align-items: center;
}
input[type=radio], input[type=checkbox]{
  flex: none;
}
</style>
<form>
  <div>
    <label><input type="checkbox" /> Label text</label>
  </div>
</form>

완전한 접두사 버전 데모는 다음과 같습니다.

label {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
input[type=radio], 
input[type=checkbox] {
	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	margin-right: 10px; 
}
/* demo only (to show alignment) */
form {
  max-width: 200px
}

<form>
  <label>
    <input type="radio" checked>
    I am an aligned radio and label
  </label>
  <label>
      <input type="checkbox" checked>
    I am an aligned checkbox and label
  </label>
</form>

나는 다음과 같이하는 데 문제가 없었습니다.

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

라벨의 'for'속성에 대한 토론에 추가하고 싶었습니다 (약간 offtopic).

JavaScript에서 사용하기에 매우 편리하기 때문에 필요하지 않은 경우에도 공급하십시오.

var label = ...
var input = document.getElementById(label.htmlFor);

라벨에 입력이 중첩되어 있거나 입력이 라벨 앞에 있거나 후에 등장하는 것 등을 파악하는 것보다 훨씬 더 편리합니다.

내 2 센트.

사용하는 경우 ASP.NET 웹 양식 DIV 및 기타 요소 또는 고정 크기에 대해 걱정할 필요가 없습니다. 우리는 정렬 할 수 있습니다 <asp:CheckBoxList> 설정하여 텍스트 float:left CSS의 CheckBoxList 입력 유형으로

다음 예제 코드를 확인하십시오.

.CheckboxList
{
    font-size: 14px;
    color: #333333;
}
.CheckboxList input
{
    float: left;
    clear: both;
}

.aspx 코드 :

<asp:CheckBoxList runat="server" ID="c1" RepeatColumns="2" CssClass="CheckboxList">
</asp:CheckBoxList>

400 개 이상의 Upvotes로 선택한 답변은 Chrome 28 OSX에서 저에게 효과가 없었습니다. 아마도 OSX에서 테스트되지 않았 거나이 질문에 대한 답변이있을 때 2008 년에 어떤 일이 있었는지 작동했기 때문일 것입니다.

타임즈가 바뀌었고 새로운 CSS3 솔루션이 가능합니다. 내 솔루션이 사용됩니다 유사 요소 a 사용자 정의 확인란. 따라서 규정 (장단점 또는 단점이지만보고 있음)은 다음과 같습니다.

현대식 브라우저 (FF3.6+, IE9+, Chrome, Safari)에서만 작동합니다.
모든 브라우저/OS에서 정확히 동일하게 렌더링되는 사용자 정의 설계 확인란에 의존합니다. 여기서는 간단한 색상을 선택했지만 항상 선형 그라디언트 등을 추가하여 더 많은 뱅을 줄 수 있습니다.
특정 글꼴/글꼴 크기에 맞춰져 있습니다. 변경하면 확인란의 위치와 크기를 변경하여 수직으로 정렬 된 것처럼 보이게합니다. 올바르게 조정하면 최종 결과는 모든 브라우저 / 운영 체제에서 정확히 동일해야합니다.
수직 정렬 특성, 플로트 없음
내 예제에서 제공된 마크 업을 사용해야합니다. 질문처럼 구성된 경우 작동하지 않지만 레이아웃은 본질적으로 동일하게 보입니다. 물건을 움직이고 싶다면 관련 CSS도 움직여야합니다.

귀하의 HTML :

<form>
    <div class="checkbox">
        <input id="check_me" type=checkbox />
        <label for="check_me">Label for checkbox</label>
    </div>
</form>

귀하의 CSS :

div.checkbox {
    position: relative;
    font-family: Arial;
    font-size: 13px;
}
label {
    position: relative;
    padding-left: 16px;
}
label::before {
    content :"";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border: solid 1px #9C9C9C;
    position: absolute;
    top: 1px;
    left: 0px;
}
label::after {
    content:"";
    width: 8px;
    height: 8px;
    background-color: #666666;
    position: absolute;
    left: 2px;
    top: 3px;
    display: none;
}
input[type=checkbox] {
    visibility: hidden;
    position: absolute;
}
input[type=checkbox]:checked + label::after {
    display: block;
}
input[type=checkbox]:active + label::before {
    background-color: #DDDDDD;
}

이 솔루션 확인란을 숨 깁니다, 가시적 확인란을 만들기 위해 라벨에 의사 요소를 추가하고 스타일을 추가합니다. 레이블이 숨겨진 확인란에 묶여 있으므로 입력 필드가 여전히 업데이트되고 값은 양식으로 제출됩니다.

jsfiddle : http://jsfiddle.net/sgxyy/6/

관심이 있으시면 여기에 라디오 버튼이 있습니다. http://jsfiddle.net/dtkrv/2/

누군가가 이것이 유용하다는 것을 알기를 바랍니다!

Twitter Bootstrap을 사용하는 경우 checkbox 클래스 <label>:

<label class="checkbox">
    <input type="checkbox"> Remember me
</label>

체크 박스의 높이와 너비를 하드 코드하고 패딩을 제거하고 높이와 수직 마진을 라벨의 선장과 동일하게 만듭니다. 레이블 텍스트가 인라인 인 경우 확인란을 둡니다. Firefox, Chrome 및 IE7+는 모두 다음 예를 동일하게 렌더링합니다. http://www.kornea.com/css-checkbox-align

<form>
    <div>
        <label style="display: inline-block">
            <input style="vertical-align: middle" type="checkbox" />
            <span style="vertical-align: middle">Label text</span>
         </label>
    </div>
</form>

트릭은 라벨 태그를 사용하는 경우 테이블 셀 또는 인라인 블록에서만 세로 정렬을 사용하는 것입니다.

입력 유형 확인란이 레이블 내부에 감싸고 왼쪽으로 떠 다니면서 :

<label for="id" class="checkbox">
    <input type="checkbox" id="id">
    <span>The Label</span>
</label>

이것은 나를 위해 효과가있었습니다.

label.checkbox {
    display: block;
}
.checkbox input {
    float: left;
    height: 18px;
    vertical-align: middle;
}
.checkbox span {
    float: left;
    line-height: 18px;
    margin: 0 0 0 20px;
}

(블록 레벨)의 라인 높이와 동일한 지 확인하십시오.

input[type=checkbox]
{
    vertical-align: middle;
}

<input id="testCheckbox" name="testCheckbox" type="checkbox">
<label for="testCheckbox">I should align</label>

자 마지막으로 살펴 문제의 원

체크 박스를 사용하여 렌더링 이미지(하나는 수정 사용자들을 통해 CSS).여기에는(체크)체크박스에서는 파이어폭스,로 강조 DOM inspector:

그리고 여기에는 동일한 스타일이 적용되지 않은 체크박스에서는 Chrome:

당신이 볼 수익(주황색);패딩은 존재하지 않는(것 같 녹색).그래서 무엇이 의사의 수익에서 오른쪽 하단에서의 확인란? 이러한 부분의 이미지를 사용에 대한 확인란.을 사용하는 이유만 vertical-align: middle 지 않는 정말 충분 그리고 그의 원인 크로스 브라우저는 문제입니다.

그래서 우리는 무엇을 할 수 있을까요?

중 하나는 명백한 옵션은–바꿉니다.다행히 하나를 통해이 작업을 수행 할 수 있습니다 CSS 및 교체를 가진 사람들이 외부 이미지,base64(에서 CSS)이미지에서 CSS svg 또는 의 요소입니다.그것의 강력(크로스 브라우저!) 에 접근,여기의 예정 도난에서 이 질문:

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  display: inline-block;
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

할 수 있습니다 더 깊이있는 기사에 대한 스타일링처럼 나열 기;그것의 범위 밖의 이 대답이다.

Ok,여전히 무엇에 대해 no-사용자 정의 이미지 또는 의사소 솔루션?

TL;박사:이처럼 보이는 작동하지 않습니다,사용자 정의 체크 박스를 사용하여 대신

첫째,하자의 통지하는 경우 다른 브라우저에서 그 의사는 여백부 확인 아이콘이었다 임의적이 없었다는 일관된 솔루션입니다.하나를 구축하고,우리의 해부학을 탐구한 이미지를 기존의 브라우저입니다.

그래서 브라우저는 무엇입니까 하는 의 여백을 확인란?나는 체크아웃 크롬 75,비발디 2.5(크롬 기반),FireFox54(지 않는 이유를 물어 이 같은 오래된),IE11,가장자리에 42,Safari??(빌리는 한 분을 위해,잊을 확인 버전)입니다.만 크롬과 비발디에는 그러한 의사익(내가 의심되는 모든 크롬의 브라우저 뿐만 아니라,오페라).

What's 크기는 사람들의 의사윤?그 이 밖으로 하나를 사용할 수 있습 확대 checkbox:

input {
  zoom: 10;
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

내 결과입니다~7%의 폭을 높이고,따라서 0.9-1.0px 에서 절대적인 단위입니다.정확도는 질문을 받을 수 있도다른 값의 zoom 에 대한 확인란을 선택합니다.내 테스트에서 모두에서 Chrome 및 비발디의 상대적 크기에 의 여백은 매우 다양서 zoom 값 10,20 에서 값 11-19(??):

scale 더 많은 것 같다 일관성 있:

input {
  transform: scale(10) translate(50%, 50%);
  box-shadow: 0 0 1px inset #999;
}

<input type=checkbox>

그래서 아마~14%2px 는 올바른 값입니다.

지금 우리가 알고 있는(?) 의 크기를 의사의 수익자의 참고 이것으로는 충분하지 않습니다.은 크기의 checkbox 아이콘에 대해 동일한 모두 브라우저?다!여기에 무엇 DOM inspector shows 한 스타일이 적용되지 않은 체크박스:

FireFox: 13.3px
크롬 기반: 12.8px 에 대한 모든 것,따라서 12.8(100%-14%)= 11px 무엇을 위해 시각적으로 인식된 확인란
IE11,가장자리: 13px
Safari:n/a(이러한과 비교될 수 있습니다.같은 화면에서,믿)

지금 우리가 논의하기 전에 모든 솔루션 또는 트릭 질문하자:은 무엇인 정 맞춤?우리는 무엇을 하려고 달성하기 위해?특정 시점의 맛의 문제,그러나 기본적으로 생각할 수 있는 다음과 같은"좋은"선형의 측면:

텍스트와 확인란에서 동일한 기준(의도적으로하지 않는 조정 체크 박스 크기가 여기):

거나 같은 중인 측면에서의 소문자:

또 동일 중인 측면에서 자본의 문자(의 차이에 대한 다른 글꼴 크기):

그리고 또한 우리는지 여부를 결정해야의 크기를 확인해야의 높이와 동일한 소문자,대문자 또는 다른 뭔가가(더 크고,더 작은 사이 또는 소문자로 및 자).

이에 대한 토론자 전화를 정렬하면 좋을 확인란의 선택에 동일한 기준으로 텍스트와 크기에도 편지(매우 논쟁의 여지가 선택):

이 도구는 무엇인가:

조정 체크 박스 크기
인식 크롬과 의사장자리를 붙인 확인란을 선택하고 설정된 특정한 스타일
조정 체크 박스/레이블 수직 정렬

에 관한 체크 박스 크기 조정:가 width, height, size, zoom, scale (가 나는 뭔가?). zoom 고 scale 지를 설정할 수 있습니다 절대 크기,그래서 그들은 도움이 될 수 있습만으로 조정하는 텍스트 크기를 설정하지 않은 크로스 브라우저 크기(지 않으면 우리는 쓸 수 있는 브라우저는 특정 규칙). size 으로 작동하지 않는 크롬(았다 그것은 오래된 IE?어쨌든,그것은 흥미로운). width 고 height 롬에서 작동하고 다른 브라우저를 설정할 수 있습니다 일반적인 크기만,다시,크롬에서 그것은 세트의 크기,전체 이미지지 않는 체크박스 자체입니다.참고:그것은 최소한(폭,높이)정의하는 확인란의 크기는(있을 경우 폭≠높이는 외부 영역을 확인란 광장에 추가하"의사률").

불행한 것은,의사는 여백에서 크롬 확인란을 설정하지 않은 영을 위해 어떤 폭과 높이를,멀리로 나가 볼 수 있습니다.
나는 두려워 없 신뢰성 CSS 유일한 방법 이러한 일입니다.
하자 고려는 수직 정렬. vertical-align 줄 수 없는 일관된 결과를 설정하는 경우 middle 나 baseline 기 때문에 크롬의 의사 마진,진짜만을 얻을 수있는 옵션과 같은"조정 시스템"모든 브라우저 정렬 라벨 입력 top:

(사진:vertical-align:상단,하단 및 하단 없이란 그림자)

그래서 어떤 결과로부터 얻을 수 있는 이?

input[type="checkbox"] {
    height: 0.95em;
    width: 0.95em;
}
label, input {
    vertical-align: top;
}

<label><input type="checkbox">label</label>

위의 코드 조각 작품으로 Chrome(크롬의 브라우저)지만,다른 브라우저가 필요한 작은 크기의 확인란을 선택합니다.그것은 보인다는 것은 불가능을 조절하는 크기와 수직 정렬 방식으로 작동하는 주위에 크롬의 체크박스 이미지 특질. 나의 최종 제안:사용자는 확인란 대신하고 당신은 좌절하지 마십시오:)

나는 보통 체크 박스를 표지하지 않은 상태로두고 "레이블"을 별도의 요소로 만듭니다. 그것은 고통이지만, 체크 박스와 레이블이 표시되는 방식 사이에는 크로스 브라우저 차이가 너무 많아서 (알아 낸 것처럼) 이것이 모든 것이 어떻게 보이는지 제어 할 수있는 유일한 방법입니다.

또한 같은 이유로 Winforms 개발 에서이 작업을 수행하게됩니다. Checkbox 컨트롤의 근본적인 문제는 실제로 두 가지 다른 컨트롤 인 상자와 레이블이라는 것입니다. 확인란을 사용하면 컨트롤의 구현 자에게 남겨 두어 두 요소가 서로 옆에 표시되는 방법을 결정합니다 (그리고 항상 잘못된 경우, 원하는 경우가 잘못되었습니다).

나는 누군가가 당신의 질문에 더 나은 대답을하기를 바랍니다.

CSS :

.threeCol .listItem {
    width:13.9em;
    padding:.2em;
    margin:.2em;
    float:left;
    border-bottom:solid #f3f3f3 1px;
}
.threeCol input {
    float:left;
    width:auto;
    margin:.2em .2em .2em 0;
    border:none;
    background:none;
}
.threeCol label {
    float:left;
    margin:.1em 0 .1em 0;
}

HTML :

<div class="threeCol">
    <div class="listItem">
        <input type="checkbox" name="name" id="id" value="checkbox1" />
        <label for="name">This is your checkBox</label>
    </div>
</div>

위의 코드는 목록 항목을 Threecols에 배치하고 넓은 너비를 변경합니다.

다음은 브라우저에서 픽셀-완벽한 일관성, 심지어 IE9를 제공합니다.

접근 방식은 분명한 시점까지 매우 합리적입니다.

입력과 레이블을 만듭니다.
원하는대로 떠 다닐 수 있도록 블록으로 표시하십시오.
높이와 선 높이를 동일한 값으로 설정하여 수직으로 중심하고 정렬하십시오.
을 위한 여자 이름 측정, 요소의 높이를 계산하기 위해 브라우저는 해당 요소의 글꼴 높이를 알아야하며 EM 측정으로 설정되어서는 안됩니다.

이로 인해 전 세계적으로 적용 가능한 일반 규칙이 나타납니다.

input, label {display:block;float:left;height:1em;line-height:1em;}

양식, 필드 셋 또는 요소 당 글꼴 크기가 적응할 수 있습니다.

#myform input, #myform label {font-size:20px;}

Mac, Windows, iPhone 및 Android에서 최신 크롬, 사파리 및 Firefox에서 테스트되었습니다. 그리고 IE9.

이 메소드는 한 줄의 텍스트보다 높은 모든 입력 유형에 적용 할 수 있습니다. 적합한 유형 규칙을 적용하십시오.

그래서 나는 이것이 여러 번 응답되었음을 알고 있지만, 나는 이미 제공된 것보다 더 우아한 솔루션을 가지고 있다고 생각합니다. 그리고 1 개의 우아한 솔루션뿐만 아니라 공상을 간지럽히는 2 개의 별도 솔루션. 그렇게 말하면, 당신이 알아야하고 볼 필요가있는 모든 것은 2 JS 바이올린에 포함되어 있으며 의견이 있습니다.

솔루션 #1은 주어진 브라우저의 기본 "Checkbox"에 의존하지만 트위스트가 있습니다 ... DIV에는 크로스 브라우저를 배치하기 쉬운 DIV에 포함되어 있습니다. (이것은 당신이 FF의 못생긴 경계를 볼 수 없도록합니다)

간단한 HTML : (주석으로 CSS를 검토하려면 링크를 따르십시오. 코드 블록은 stackoverflow를 만족시키는 것입니다) http://jsfiddle.net/kqghj/

<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>

솔루션 #2는 "Checkbox Toggle Hack"을 사용하여 브라우저에 올바르게 배치 된 CSS 상태를 전환하고 확인되지 않은 상태 및 확인되지 않은 상태에 대한 간단한 스프라이트로 설정합니다. CheckBox 토글 해킹으로 배경 위치를 조정하는 것입니다. 내 생각에, 이것은 체크 박스 및 라디오를 더 많이 제어 할 수 있기 때문에 더 우아한 솔루션이며 브라우저에서 동일하게 보일 수 있습니다.

간단한 HTML : (주석으로 CSS를 검토하려면 링크를 따르십시오. 코드 블록은 stackoverflow를 만족시키는 것입니다) http://jsfiddle.net/sx5m2/

<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>

이 방법에 동의하지 않는다면, 저에게 의견을 남겨주세요. 왜 다른 사람들이 이러한 솔루션을 발견하지 못한 이유에 대한 피드백을 듣고 싶습니다. 이 방법 중 하나가 실패한 것을 본다면, 그것을 보는 것이 좋을 것입니다. 그러나 이것들은 최신 브라우저에서 테스트되었으며, 내가 본 것만 큼 오래된 HTML / CSS 방법에 의존했습니다.

예, 감사합니다! 이것도 나를 영원히 미쳤다.

내 특별한 경우, 이것은 나에게 효과적이었습니다.

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: top;
    position: relative;
    *top: 1px;
    *overflow: hidden;
}
label {
    display: block;
    padding: 0;
    padding-left: 15px;
    text-indent: -15px;
    border: 0px solid;
    margin-left: 5px;
    vertical-align: top;
}

나는 일부 차이점을 설명 할 수있는 reset.css를 사용하고 있지만 이것은 나에게 잘 작동하는 것 같습니다.

position: relative; IE에는 z-index와 JQuery의 SlideUp/Slididown과 같은 애니메이션이있는 몇 가지 문제가 있습니다.

CSS :

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    position: relative;
    top: 3px;
    margin: 0 3px 0 0;
    padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
    vertical-align: middle;
    position: static;
    margin-bottom: -2px;
    height: 13px;
    width: 13px;
}

jQuery :

$(document).ready(function () {
    if ($.browser.msie && $.browser.version <= 7) {
        $('input[type=checkbox]').addClass('ie7');
        $('input[type=radio]').addClass('ie7');
    }
});

스타일링은 아마도 사용 된 글꼴 크기에 따라 조정이 필요할 것입니다. <label>

추신:
나는 사용한다 ie7js CSS가 IE6에서 작동하도록합니다.

간단히 사용하십시오 vertical-align: sub, 처럼 포크리 쉬카 이미 제안되었습니다.

깡깡이

HTML 코드 :

<div class="checkboxes">
    <label for="check1">Test</label>
    <input id="check1" type="checkbox"></input>
</div>

CSS 코드 :

.checkboxes input {
    vertical-align: sub;
}

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow