질문자 :Community Wiki
이것은 나를 끊임없이 괴롭히는 사소한 CSS 문제 중 하나입니다.
스택 오버플로 주변 사람들은 어떻게 checkboxes 과 labels 브라우저 간에 일관되게 수직으로 정렬합니까?
Safari에서 올바르게 정렬할 때마다(보통 vertical-align: baseline on the input ), Firefox와 IE에서는 완전히 꺼져 있습니다.
Firefox에서 수정하면 Safari와 IE가 불가피하게 엉망이 됩니다. 나는 양식을 코딩할 때마다 이것에 시간을 낭비합니다.
다음은 내가 작업하는 표준 코드입니다.
<form> <div> <label><input type="checkbox" /> Label text</label> </div> </form>나는 일반적으로 Eric Meyer의 재설정을 사용하므로 양식 요소는 재정의가 상대적으로 깨끗합니다. 당신이 제공해야 할 어떤 팁이나 트릭을 기대합니다!
나는 이 답변의 포스터가 아니지만 이 글을 쓰는 시점에서 이것은 긍정 및 부정 투표(+1035 -17) 모두에서 가장 많이 투표된 답변이며 여전히 허용된 답변으로 표시됩니다(아마도 질문의 원래 포스터는 이 답변을 작성한 사람입니다).
의견에서 이미 여러 번 언급했듯이 이 답변은 더 이상 대부분의 브라우저에서 작동하지 않습니다(2013년 이후로는 작동하지 않는 것 같습니다).
한 시간 넘게 다양한 스타일의 마크업을 수정하고 테스트하고 시도한 후에 적절한 솔루션을 찾을 수 있을 것 같습니다. 이 특정 프로젝트의 요구 사항은 다음과 같습니다.
설명을 시작하기 전에 코드를 제공하겠습니다.
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 의 작업 예제입니다.
이 코드는 양식 입력 여백 및 패딩을 무시하지 않는 Eric Meyer와 같은 재설정을 사용하고 있다고 가정합니다(따라서 입력 CSS에 여백 및 패딩 재설정을 넣음). 분명히 라이브 환경에서는 다른 입력 요소를 지원하기 위해 항목을 중첩/재정의할 수 있지만 저는 일을 단순하게 유지하고 싶었습니다.
참고 사항:
*overflow 선언은 인라인 IE 핵(별 속성 핵)입니다. IE 6과 7 모두 이를 인지하지만 Safari와 Firefox는 이를 제대로 무시합니다. 유효한 CSS라고 생각하지만 조건부 주석을 사용하는 것이 더 좋습니다. 그냥 간단하게 사용했습니다.vertical-align vertical-align: bottom 뿐이었다. 이것을 설정한 다음 상대적으로 위쪽으로 위치 지정하면 Safari, Firefox 및 IE에서 픽셀 또는 두 개의 불일치로 거의 동일하게 작동합니다.overflow: hidden 은 어떤 이유로 추가 공간을 차단하고 IE의 위치 지정이 Safari 및 Firefox와 매우 유사하게 작동하도록 합니다.이것이 다른 사람을 돕기를 바랍니다! 오늘 아침에 작업한 프로젝트 이외의 다른 프로젝트에서 이 특정 기술을 시도하지 않았으므로 더 일관되게 작동하는 것을 찾으면 확실히 파이프하십시오.
때때로 vertical-align은 제대로 작동하기 위해 나란히 두 개의 인라인 요소(스팬, 레이블, 입력 등...)가 필요합니다. 다음 확인란은 텍스트 크기가 매우 작거나 크더라도 IE, Safari, FF 및 Chrome에서 수직으로 중앙에 올바르게 정렬됩니다.
그것들은 모두 같은 줄에서 서로 옆에 떠 있지만, nowrap은 전체 레이블 텍스트가 항상 확인란 옆에 유지된다는 것을 의미합니다.
단점은 무의미한 SPAN 태그가 추가된다는 것입니다.
.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><input type="checkbox"> <span>Label text x</span></label> <label><input type="checkbox"> <span>Label text y</span></label> <label><input type="checkbox"> <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><input type="checkbox"> <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><input type="checkbox"> <span>Label text y</span></label> <label><input type="checkbox"> <span>Label text z</span></label> </div> </form>One Crayon의 솔루션으로 작업하면 저에게 적합하고 더 간단한 것이 있습니다.
.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 모두 양호한 것으로 확인됩니다. 또한 크고 작은 다양한 레이블 글꼴 크기에서 작동합니다. 이제 선택 및 입력에 대한 IE의 기준선을 수정하기 위해 ...
업데이트: (타사 편집)
적절한 bottom 위치는 font-family 및 font-size에 따라 다릅니다! 나는 바닥을 사용하여 찾았습니다 bottom: .08em; 확인란 및 라디오 요소의 경우 일반적으로 좋은 값입니다. Arial & Calibri 글꼴이 있는 Windows의 Chrome/Firefox/IE11에서 여러 개의 small/mid/large 글꼴 크기를 사용하여 테스트했습니다.
.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>잘 작동하는 것처럼 보이는 한 가지 쉬운 방법은 vertical-align으로 체크박스의 수직 위치를 조정하는 것입니다. 여전히 브라우저마다 다르지만 솔루션은 복잡하지 않습니다.
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에서 시도했으며 세 가지 브라우저 모두에서 픽셀 단위로 렌더링합니다.
* { 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에서 테스트되었습니다. 예: Fiddle
내 솔루션을 완전히 테스트하지는 않았지만 잘 작동하는 것 같습니다.
내 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; } <label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label> <label class="checkbox"><input type="checkbox" value="0100">0100 - 0200</label> <label class="checkbox"><input type="checkbox" value="0200">0200 - 0300</label> <label class="checkbox"><input type="checkbox" value="0300">0300 - 0400</label>누군가 이것이 작동하지 않는다는 것을 알게되면 친절하게 알려주십시오. 다음은 실행 중인 것입니다(Chrome 및 IE - 스크린샷이 망막에서 촬영되었고 IE의 경우 유사 기능을 사용했기 때문에 사과드립니다).
나는 일반적으로 정적 텍스트의 세로 위치를 조정하기 위해 줄 높이를 사용합니다.
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>도움이 되기를 바랍니다.
확인란은 이미지를 사용하여 렌더링됩니다(CSS를 통해 사용자 지정 항목을 설정할 수 있음). 다음은 DOM 검사기로 강조 표시된 FireFox의 (선택되지 않은) 확인란입니다.
다음은 Chrome의 동일한 스타일 없는 체크박스입니다.
여백(주황색)을 볼 수 있습니다. 패딩이 없습니다(녹색으로 표시됨). 그러면 확인란의 오른쪽과 아래쪽에 있는 이 유사 여백은 무엇입니까? 이것들은 체크박스에 사용된 이미지의 일부입니다 . vertical-align: middle 만 사용하는 것만으로는 충분하지 않으며 이것이 브라우저 간 문제의 원인입니다.
한 가지 분명한 옵션은 – 이미지를 교체하는 것입니다! 다행히 CSS를 통해 이를 수행하고 외부 이미지, base64(in-CSS) 이미지, in-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>여기에 나열된 것과 같은 스타일에 대한 좀 더 심층적인 기사를 읽고 싶을 수도 있습니다. 이 답변의 범위를 벗어납니다.
TL;DR: 작동하지 않는 것 같습니다. 대신 맞춤 확인란을 사용하세요.
먼저, 다른 브라우저에서 체크박스 아이콘 내부의 의사 여백이 임의적이라면 일관된 솔루션이 없었습니다. 이를 구축하려면 기존 브라우저에서 이러한 이미지의 구조를 탐색해야 합니다.
그렇다면 체크박스에 의사 여백이 있는 브라우저는 무엇입니까? Chrome 75, Vivaldi 2.5(Chromium 기반), FireFox 54(왜 그런 구식인지 묻지 않음), IE 11, Edge 42, Safari ?? (분 동안 하나를 빌렸고 버전을 확인하는 것을 잊었습니다). Chrome과 Vivaldi에만 이러한 유사 여백이 있습니다(Opera와 같은 모든 Chromium 기반 브라우저도 의심됩니다).
그 유사 여백의 크기는 얼마입니까? 이것을 알아내기 위해 확대된 체크박스를 사용할 수 있습니다:
input { zoom: 10; box-shadow: 0 0 1px inset #999; } <input type=checkbox> 내 결과는 너비/높이의 ~7%이므로 절대 단위로 0.9-1.0px입니다. 그러나 정확성에 의문을 제기할 수 있습니다. 확인란에 대해 zoom Chrome과 Vivaldi의 테스트에서 의사 여백의 상대적 크기는 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가 올바른 값일 것입니다.
이제 의사 여백의 크기(?)를 알았으므로 이것이 충분하지 않다는 점에 유의합시다. 확인란 아이콘의 크기는 모든 브라우저에서 동일합니까? 아아! 다음은 스타일이 지정되지 않은 확인란에 대해 DOM 검사기가 표시하는 내용입니다.
이제 솔루션이나 트릭을 논의하기 전에 올바른 정렬이 무엇인지 물어보겠습니다. 우리는 무엇을 성취하려고 합니까? 어느 정도는 취향의 문제지만 기본적으로 다음과 같은 "좋은" 정렬의 측면을 생각할 수 있습니다.
동일한 기준선의 텍스트 및 확인란(여기서 확인란 크기를 의도적으로 조정하지 않음):
또는 소문자 측면에서 동일한 중간 줄이 있습니다.
또는 대문자로 된 동일한 중간 줄(서체 크기에 따른 차이를 더 쉽게 볼 수 있음):
또한 확인란의 크기가 소문자, 대문자 또는 다른 것(더 크거나 작거나 또는 소문자와 대문자 사이)의 높이와 같아야 하는지 여부를 결정해야 합니다.
이 논의를 위해 확인란이 텍스트와 동일한 기준선에 있고 대문자 크기(매우 논쟁의 여지가 있는 선택)인 경우 정렬을 nice라고 합시다.
이제 어떤 도구가 필요합니까?
?
확인란 크기 조정 과 관련하여 width , height , size , zoom , scale (내가 놓친 것이 있습니까?). zoom 및 scale 은 절대 크기 설정을 허용하지 않으므로 브라우저 간 크기를 설정하지 않고 텍스트 크기 조정에만 도움이 될 수 있습니다(브라우저별 규칙을 작성할 수 없는 경우). size 는 Chrome에서 작동하지 않습니다(이전 IE에서도 작동했습니까? 어쨌든 흥미롭지 않습니다). width 와 height Chrome 및 기타 브라우저에서 작동하므로 공통 크기를 설정할 수 있지만 Chrome에서는 확인란 자체가 아니라 전체 이미지의 크기를 설정합니다. 참고: 체크박스의 크기를 정의하는 최소값(너비, 높이)입니다(너비 ≠ 높이인 경우 체크박스 사각형 외부 영역이 "의사 여백"에 추가됨).
불행히도 Chrome 확인란의 의사 여백은 내가 볼 수 있는 한 너비와 높이에 대해 0으로 설정되어 있지 않습니다.
요즘 믿을만한 CSS 전용 방법 이 없는 것 같아요.
수직 정렬을 생각해 봅시다. vertical-align middle 또는 baseline 설정하면 일관된 결과를 제공할 수 없습니다. 모든 브라우저에 대해 동일한 "좌표계"를 얻는 유일한 실제 옵션은 레이블과 입력을 top 에 정렬하는 것입니다.
(사진상: vertical-align: box-shadow 없이 위, 아래, 아래)
그래서 우리는 이것으로부터 어떤 결과를 얻습니까?
input[type="checkbox"] { height: 0.95em; width: 0.95em; } label, input { vertical-align: top; } <label><input type="checkbox">label</label>위의 스니펫은 Chrome(Chromium 기반 브라우저)에서 작동하지만 다른 브라우저에서는 더 작은 크기의 확인란이 필요합니다. Chromium의 확인란 이미지 문제를 해결하는 방식으로 크기와 수직 정렬을 모두 조정하는 것은 불가능한 것 같습니다. 내 마지막 제안은 사용자 지정 확인란을 대신 사용하는 것입니다. 그러면 좌절을 피할 수 있습니다. :)
이제 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>이게 제일 쉬운 방법인 것 같아요
input { position: relative; top: 1px; } <form> <div> <label><input type="checkbox" /> Label text</label> </div> <form> <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>트릭은 테이블 셀에서만 수직 정렬을 사용하거나 레이블 태그를 사용하는 경우 인라인 블록을 사용하는 것입니다.
상대 위치 지정은 요소를 해당 수준의 다른 모든 요소 위에 렌더링하기 때문에 좋아하지 않습니다(복잡한 레이아웃이 있는 경우 무언가 위에 올 수 있음).
vertical-align: sub 사용하면 Chrome, Firefox 및 Opera에서 확인란이 충분히 정렬된 것처럼 보입니다. 나는 MacOS가 없고 IE10이 약간 꺼져 있기 때문에 Safari를 확인할 수 없지만 나에게 충분한 솔루션을 찾았습니다.
또 다른 해결책은 모든 브라우저에 대해 특정 CSS를 만들고 %/pixels/EMs에서 수직 정렬로 미세 조정하는 것입니다. http://css-tricks.com/snippets/css/browser-specific-hacks/
이것은 나를 위해 잘 작동합니다.
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>400개 이상의 찬성 투표로 선택한 답변은 Chrome 28 OSX에서 작동하지 않았습니다. 아마도 OSX에서 테스트되지 않았거나 이 질문에 대한 답변을 받았을 때 2008년에 작동했기 때문일 것입니다.
시대가 바뀌었고 새로운 CSS3 솔루션이 이제 실현 가능합니다. 내 솔루션은 의사 요소 를 사용하여 사용자 지정 확인란 을 만듭니다. 따라서 조건(장단점, 어떻게 보든)은 다음과 같습니다.
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; } <form> <div class="checkbox"> <input id="check_me" type=checkbox /> <label for="check_me">Label for checkbox</label> </div> </form>이 솔루션 은 확인란을 숨기고 레이블에 유사 요소를 추가하고 스타일을 지정하여 보이는 확인란을 만듭니다. 레이블이 숨겨진 확인란에 연결되어 있기 때문에 입력 필드는 계속 업데이트되고 값은 양식과 함께 제출됩니다.
그리고 관심이 있으시면 여기 라디오 버튼에 대한 제 의견이 있습니다. http://jsfiddle.net/DtKrV/2/
누군가가 이것을 유용하게 사용하기를 바랍니다!
다음과 같이 하는 데 문제가 발생한 적이 없습니다.
<form> <div> <input type="checkbox" id="cb" /> <label for="cb">Label text</label> </div> </form>ASP.NET Web Forms 를 사용하는 경우 DIV 및 기타 요소 또는 고정 크기에 대해 걱정할 필요가 없습니다. float:left 를 CSS의 CheckboxList 입력 유형으로 설정 <asp: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>Twitter Bootstrap을 사용하는 <label> checkbox 클래스를 사용할 수 있습니다.
<label class="checkbox"> <input type="checkbox"> Remember me </label>레이블 내부에 래핑된 입력 유형 확인란을 사용하여 다음과 같이 왼쪽으로 띄웠습니다.
<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; }의 높이가 (blocklevel) 의 line-height와 동일한지 확인하십시오.
확인란의 높이와 너비를 하드코딩하고 패딩을 제거하고 높이와 수직 여백을 레이블의 줄 높이와 같게 만듭니다. 레이블 텍스트가 인라인이면 확인란을 띄웁니다. Firefox, Chrome 및 IE7+는 모두 다음 예제를 동일하게 렌더링합니다. http://www.kornea.com/css-checkbox-align
input[type=checkbox] { vertical-align: middle; } <input id="testCheckbox" name="testCheckbox" type="checkbox"> <label for="testCheckbox">I should align</label>나는 일반적으로 확인란을 레이블이 없는 상태로 두고 "레이블"을 별도의 요소로 만듭니다. 고통스럽긴 하지만 체크박스와 레이블이 표시되는 방식 사이에는 브라우저 간 차이가 너무 커서(알다시피) 이것이 내가 모든 모양을 제어하는 데 근접할 수 있는 유일한 방법입니다.
같은 이유로 winforms 개발에서도 이 작업을 수행합니다. 체크박스 컨트롤의 근본적인 문제는 이것이 실제로는 상자와 레이블이라는 두 개의 다른 컨트롤이라는 것입니다. 확인란을 사용하면 컨트롤의 구현자가 두 요소가 나란히 표시되는 방식을 결정하게 됩니다.
누군가가 질문에 더 나은 답변을 해주기를 바랍니다.
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를 포함한 여러 브라우저에서 픽셀 완벽한 일관성을 제공합니다.
접근 방식은 명백할 정도로 매우 합리적입니다.
그 결과 전역적으로 적용 가능한 일반 규칙이 생성됩니다.
input, label {display:block;float:left;height:1em;line-height:1em;}양식, 필드 세트 또는 요소별로 글꼴 크기를 조정할 수 있습니다.
#myform input, #myform label {font-size:20px;}Mac, Windows, Iphone 및 Android의 최신 Chrome, Safari 및 Firefox에서 테스트되었습니다. 그리고 IE9.
이 방법은 한 줄의 텍스트보다 높지 않은 모든 입력 유형에 적용할 수 있습니다. 적합하도록 유형 규칙을 적용합니다.
그래서 나는 이것이 여러 번 답변되었다는 것을 알고 있지만 이미 제공된 솔루션보다 훨씬 더 우아한 솔루션을 가지고 있다고 느낍니다. 그리고 1개의 우아한 솔루션뿐만 아니라 2개의 개별 솔루션으로 당신의 공상을 간질입니다. 즉, 당신이 알고 볼 필요가 있는 모든 것이 주석과 함께 2개의 JS Fiddle에 포함되어 있습니다.
솔루션 #1은 주어진 브라우저의 기본 "체크박스"에 의존하지만, 약간의 변형이 있습니다... div에 포함되어 있어 브라우저 간 위치를 지정하기 더 쉽고 오버플로가 있습니다. (이것은 FF의 못생긴 테두리를 볼 수 없도록 하기 위한 것입니다)
간단한 HTML: (코멘트가 있는 CSS를 검토하려면 링크를 따라가세요. 코드 블록은 stackoverflow를 만족시키는 것입니다) http://jsfiddle.net/KQghJ/
<label><div class="checkbox"><input type="checkbox" /></div> Label text</label>솔루션 #2는 "Checkbox Toggle Hack"을 사용하여 브라우저 전체에 적절하게 배치된 DIV의 CSS 상태를 토글하고 체크박스가 선택되지 않은 상태와 선택된 상태에 대해 간단한 스프라이트로 설정합니다. 필요한 것은 Checkbox Toggle Hack으로 배경 위치를 조정하는 것입니다. 내 생각에 이것은 확인란과 라디오를 더 많이 제어할 수 있고 브라우저에서 동일하게 표시되도록 보장할 수 있으므로 더 우아한 솔루션입니다.
간단한 HTML: (코멘트가 있는 CSS를 검토하려면 링크를 따르십시오. 코드 블록은 StackOverflow를 만족시키는 것입니다) http://jsfiddle.net/Sx5M2/
<label><input type="checkbox" /><div class="checkbox"></div>Label text</label>이 방법에 동의하지 않는 사람이 있으면 의견을 남겨주세요. 다른 사람들이 이러한 솔루션을 찾지 못한 이유에 대한 피드백을 듣고 싶습니다. 또는 있는 경우 여기에 관련하여 답변이 없는 이유는 무엇입니까? 누군가가 이러한 방법 중 하나가 실패하는 것을 본다면 그것도 볼 수 있지만 이것은 최신 브라우저에서 테스트되었으며 내가 본 한 꽤 오래되고 보편적인 HTML/CSS 방법에 의존합니다.
이것은 문제를 해결하는 가장 좋은 방법이 아닙니다.
vertical-align: middle style="position:relative;top:2px;" 입력 상자로 이동하면 2px 아래로 이동합니다. 따라서 글꼴 크기에 따라 이동할 수 있습니다.
예 감사합니다! 이것 역시 나를 영원히 미치게 만들었다.
내 특별한 경우에는 이것이 나를 위해 일했습니다.
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; jQuery의 slideUp/slideDown과 같은 z-색인 및 애니메이션이 있는 IE에서 몇 가지 문제가 있습니다.
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; }제이쿼리:
$(document).ready(function () { if ($.browser.msie && $.browser.version <= 7) { $('input[type=checkbox]').addClass('ie7'); $('input[type=radio]').addClass('ie7'); } }); <label> 사용된 글꼴 크기에 따라 조정이 필요할 수 있습니다.
추신:
IE6에서 CSS가 작동하도록 ie7js를 사용합니다.
pokrishka가 이미 제안한 대로 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; }출처 : http:www.stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers
| NodeJS 및 NPM을 다음 버전으로 업데이트하려면 어떻게 해야 합니까? (0) | 2021.12.28 |
|---|---|
| Vim에서 전체 줄을 복제하는 방법은 무엇입니까? (0) | 2021.12.28 |
| Node.js에서 파일 쓰기 (0) | 2021.12.28 |
| React 라우터를 사용하여 프로그래밍 방식으로 탐색 (0) | 2021.12.28 |
| npm 5에서 생성한 package-lock.json 파일을 커밋합니까? (0) | 2021.12.26 |