Đây là một trong những vấn đề nhỏ về CSS làm tôi khó chịu. Làm thế nào để mọi người xung quanh Stack Overflow sắp xếp theo chiều dọc checkboxesvà trình duyệt chéolabels nhất quán của họ ? Bất cứ khi nào tôi căn chỉnh chúng chính xác trong Safari (thường sử dụng trên ), chúng sẽ hoàn toàn tắt trong Firefox và IE. Khắc phục sự cố trong Firefox và Safari và IE chắc chắn đã bị rối. Tôi lãng phí thời gian vào việc này mỗi khi tôi viết mã.vertical-align: baselineinput

Đây là mã tiêu chuẩn mà tôi làm việc với:

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

Tôi thường sử dụng thiết lập lại của Eric Meyer, vì vậy các yếu tố hình thức tương đối sạch các phần ghi đè. Mong muốn bất kỳ lời khuyên hoặc thủ thuật mà bạn phải cung cấp!

Sau hơn một giờ điều chỉnh, thử nghiệm và thử các phong cách đánh dấu khác nhau, tôi nghĩ rằng tôi có thể có một giải pháp hợp lý. Các yêu cầu cho dự án cụ thể này là:

1. Đầu vào phải trên dòng riêng của họ.
2. Các đầu vào hộp kiểm cần căn chỉnh theo chiều dọc với văn bản nhãn tương tự (nếu không giống hệt nhau) trên tất cả các trình duyệt.
3. Nếu văn bản nhãn kết thúc tốt đẹp, nó cần phải được thụt lề (vì vậy không bao bọc bên dưới hộp kiểm).

Trước khi tôi nhận được bất kỳ lời giải thích nào, tôi sẽ chỉ cung cấp cho bạn mã:

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>

Đây là ví dụ hoạt động trong JSFiddle .

Mã này giả định rằng bạn đang sử dụng một thiết lập lại như Eric Meyer không ghi đè lên lề và phần đệm của hình thức đầu vào (do đó đặt lề và phần đệm đặt lại trong CSS đầu vào). Rõ ràng trong một môi trường sống, có lẽ bạn sẽ lồng / ghi đè các công cụ để hỗ trợ các yếu tố đầu vào khác, nhưng tôi muốn giữ mọi thứ đơn giản.

Những điều cần lưu ý:

• Các *overflowtuyên bố là một inline IE Hack (ngôi sao-bất động sản hack). Cả IE 6 và 7 sẽ chú ý đến nó, nhưng Safari và Firefox sẽ bỏ qua nó một cách chính xác. Tôi nghĩ rằng nó có thể là CSS hợp lệ, nhưng bạn vẫn tốt hơn với các bình luận có điều kiện; chỉ sử dụng nó cho đơn giản.
• Theo cách tốt nhất tôi có thể nói, vertical-aligntuyên bố duy nhất phù hợp trên các trình duyệt là vertical-align: bottom. Đặt cài đặt này và sau đó định vị tương đối hướng lên hành vi gần như giống hệt nhau trong Safari, Firefox và IE chỉ với một hoặc hai pixel khác biệt.
• Vấn đề chính trong việc làm việc với sự liên kết là IE dính một loạt không gian bí ẩn xung quanh các yếu tố đầu vào. Nó không phải là đệm hoặc lề, và nó liên tục bị nguyền rủa. Đặt chiều rộng và chiều cao trên hộp kiểm và sau đó overflow: hiddenvì một số lý do sẽ cắt bớt không gian thừa và cho phép định vị của IE hoạt động rất giống với Safari và Firefox.
• Tùy thuộc vào kích thước văn bản của bạn, bạn chắc chắn sẽ cần phải điều chỉnh vị trí tương đối, chiều rộng, chiều cao, v.v. để mọi thứ trở nên chính xác.

Hy vọng điều này sẽ giúp người khác! Tôi đã không thử kỹ thuật cụ thể này trên bất kỳ dự án nào khác ngoài dự án tôi đang làm vào sáng nay, vì vậy chắc chắn sẽ kết thúc nếu bạn tìm thấy một cái gì đó hoạt động ổn định hơn.

Đôi khi căn chỉnh dọc cần hai phần tử nội tuyến (span, nhãn, đầu vào, v.v.) cạnh nhau để hoạt động chính xác. Các hộp kiểm sau đây được căn giữa theo chiều dọc chính xác trong IE, Safari, FF và Chrome, ngay cả khi kích thước văn bản rất nhỏ hoặc lớn.

Tất cả chúng đều nằm cạnh nhau trên cùng một dòng, nhưng nowrap có nghĩa là toàn bộ văn bản nhãn luôn ở bên cạnh hộp kiểm.

Nhược điểm là các thẻ SPAN vô nghĩa thêm.

.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>

Bây giờ, nếu bạn có một văn bản nhãn rất dài cần bọc mà không bọc trong hộp kiểm, bạn sẽ sử dụng phần đệm và văn bản phủ định thụt vào các thành phần nhãn:

.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>

Làm việc với giải pháp của One Crayon , tôi có một cái gì đó phù hợp với mình và đơn giản hơn:

.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>

Hiển thị pixel-for-pixel giống nhau trong Safari (có đường cơ sở mà tôi tin tưởng) và cả Firefox và IE7 đều tốt. Nó cũng hoạt động cho các kích cỡ phông chữ nhãn khác nhau, lớn và nhỏ. Bây giờ, để sửa đường cơ sở của IE trên các lựa chọn và đầu vào ...

Cập nhật: (Chỉnh sửa của bên thứ ba)

Vị bottomtrí thích hợp phụ thuộc vào họ phông chữ và cỡ chữ! Tôi thấy rằng sử dụng bottom: .08em;cho các yếu tố hộp kiểm & radio là một giá trị chung tốt. Tôi đã thử nghiệm nó trong Chrome / Firefox / IE11 trong các cửa sổ với phông chữ Arial & Calibri bằng cách sử dụng một số cỡ chữ nhỏ / trung bình / lớn.

.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>

Một điều dễ dàng có vẻ hoạt động tốt là áp dụng điều chỉnh vị trí dọc của hộp kiểm với căn chỉnh dọc. Nó vẫn sẽ khác nhau giữa các trình duyệt, nhưng giải pháp là không phức tạp.

input {
    vertical-align: -2px;
}

Tài liệu tham khảo

thử vertical-align: middle

Ngoài ra mã của bạn có vẻ như nó phải là:

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

Hãy thử giải pháp của tôi, tôi đã thử nó trong IE 6, FF2 và Chrome và nó hiển thị pixel theo pixel trong cả ba trình duyệt.

* {
  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>

Giải pháp hoàn hảo duy nhất cho tôi là:

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

Đã thử nghiệm ngày hôm nay trong Chrome, Firefox, Opera, IE 7 và 8. Ví dụ: Fiddle

Tôi chưa hoàn toàn thử nghiệm giải pháp của mình, nhưng nó có vẻ hiệu quả.

HTML của tôi chỉ đơn giản là:

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

Sau đó tôi đặt tất cả các hộp kiểm 24pxcho cả chiều cao và chiều rộng. Để thực hiện các văn bản liên kết Tôi làm cho nhãn là line-heightcũng 24pxvà assign vertical-align: top;như vậy:

EDIT: Sau khi kiểm tra IE tôi đã thêm vertical-align: bottom;vào đầu vào và thay đổi CSS của nhãn. Bạn có thể thấy bạn cần một trường hợp css IE có điều kiện để sắp xếp phần đệm - nhưng văn bản và hộp là nội tuyến.

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>

Nếu bất cứ ai thấy rằng điều này không làm việc, xin vui lòng cho tôi biết. Đây là hành động (trong Chrome và IE - lời xin lỗi khi ảnh chụp màn hình được chụp trên võng mạc và sử dụng song song cho IE):

Tôi thường sử dụng chiều cao dòng để điều chỉnh vị trí dọc của văn bản tĩnh:

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>

Mong rằng sẽ giúp.

<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>

Mẹo nhỏ là chỉ sử dụng căn chỉnh dọc trong các ô của bảng hoặc khối nội tuyến nếu sử dụng thẻ nhãn.

Cuối cùng chúng ta hãy xem xét nguồn gốc của vấn đề

Các hộp kiểm được hiển thị bằng hình ảnh (người ta có thể đặt tùy chỉnh thông qua CSS). Đây là hộp kiểm (không được kiểm tra) trong FireFox, được đánh dấu bằng trình kiểm tra DOM:

Và đây là hộp kiểm chưa được xử lý tương tự trong Chrome:

Bạn có thể thấy lề (màu cam); đệm không có mặt (sẽ được hiển thị màu xanh lá cây). Vì vậy, cái giả giả này ở bên phải và dưới cùng của hộp kiểm? Đây là những phần của hình ảnh được sử dụng cho hộp kiểm . Đó là lý do tại sao việc sử dụng vertical-align: middlekhông thực sự đủ và đó là nguồn gốc của các vấn đề trên trình duyệt chéo.

vậy chúng ta có thể làm gì?

Một lựa chọn rõ ràng là - thay thế hình ảnh! May mắn thay, người ta có thể thực hiện điều này thông qua CSS và thay thế chúng bằng các hình ảnh bên ngoài, hình ảnh base64 (in-CSS), svg trong CSS hoặc chỉ các phần tử giả. Đó là một cách tiếp cận mạnh mẽ (đa trình duyệt!) Và đây là một ví dụ về điều chỉnh như vậy bị đánh cắp từ câu hỏi này :

.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>

Bạn có thể muốn đọc một số bài viết chuyên sâu hơn về kiểu dáng như một số được liệt kê ở đây ; nó nằm ngoài phạm vi của câu trả lời này.

Ok, còn những gì về giải pháp không có tùy chỉnh hình ảnh hoặc giả giả?

TL; DR: có vẻ như điều này sẽ không hoạt động, thay vào đó hãy sử dụng hộp kiểm tùy chỉnh

Trước tiên, hãy lưu ý rằng nếu trong các trình duyệt khác, các biểu tượng giả bên trong biểu tượng hộp kiểm là tùy ý, thì không có giải pháp nhất quán. Để xây dựng một cái, chúng ta phải khám phá cấu trúc của những hình ảnh như vậy trong các trình duyệt hiện có.

Vì vậy, những trình duyệt nào có lề giả trong hộp kiểm? Tôi đã kiểm tra Chrome 75, Vivaldi 2.5 (dựa trên Chromium), FireFox 54 (đừng hỏi tại sao lại lỗi thời như vậy), IE 11, Edge 42, Safari ?? (mượn một phút, quên kiểm tra phiên bản). Chỉ Chrome và Vivaldi mới có lề giả như vậy (tôi nghi ngờ tất cả các trình duyệt dựa trên Chromium, như Opera).

Kích thước của những cái giả đó là bao nhiêu? Để tìm hiểu điều này, người ta có thể sử dụng hộp kiểm phóng to:

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

<input type=checkbox>

kết quả của tôi là ~ 7% chiều rộng / chiều cao và do đó 0,9-1,0px theo đơn vị tuyệt đối. Độ chính xác có thể được đặt câu hỏi, mặc dù: thử các giá trị khác nhau zoomcho hộp kiểm. Trong các thử nghiệm của tôi ở cả Chrome và Vivaldi, kích thước tương đối của lề giả rất khác nhau ở zoomcác giá trị 10, 20 và ở các giá trị 11-19 (??):

scale dường như phù hợp hơn:

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

<input type=checkbox>

vì vậy có lẽ ~ 14% và 2px là các giá trị chính xác.

Bây giờ chúng ta đã biết (?) Kích thước của lề giả, hãy lưu ý rằng điều này là không đủ. Các kích thước của các biểu tượng hộp kiểm có giống nhau cho tất cả các trình duyệt không? Than ôi! Dưới đây là những gì trình kiểm tra DOM hiển thị cho các hộp kiểm chưa được lọc:

• FireFox: 13.3px
• Dựa trên Chromium: 12.8px cho toàn bộ, do đó 12.8 (100% - 14%) = 11px cho những gì được xem trực quan là hộp kiểm
• IE 11, Cạnh: 13px
• Safari: không áp dụng (những cái này nên được so sánh trên cùng một màn hình, tôi tin vậy)

Bây giờ trước khi chúng ta thảo luận về bất kỳ giải pháp hoặc thủ thuật nào, hãy hỏi: căn chỉnh chính xác là gì? Chúng ta đang cố gắng đạt được những gì? Ở một điểm nào đó, đó là vấn đề của hương vị, nhưng về cơ bản tôi có thể nghĩ đến các khía cạnh "tốt đẹp" sau đây:

văn bản và hộp kiểm trên cùng một đường cơ sở (Tôi cố tình không điều chỉnh kích thước hộp kiểm ở đây):

hoặc có cùng một dòng giữa về chữ cái viết thường:

hoặc cùng một dòng giữa về chữ in hoa (dễ dàng nhận thấy sự khác biệt cho kích thước phông chữ khác nhau):

và chúng tôi cũng phải quyết định xem kích thước của hộp kiểm có nên bằng chiều cao của chữ cái viết thường, chữ in hoa hay cái gì khác không (lớn hơn, nhỏ hơn hoặc giữa chữ thường và chữ hoa).

Đối với cuộc thảo luận này, hãy gọi một căn chỉnh đẹp nếu hộp kiểm nằm trên cùng một đường cơ sở với văn bản và có kích thước của chữ in hoa (một lựa chọn rất dễ tranh cãi):

Bây giờ chúng ta phải có những công cụ gì:

1. điều chỉnh kích thước hộp kiểm
2. nhận ra Chromium bằng hộp kiểm giả lề và đặt kiểu cụ thể
3. điều chỉnh hộp kiểm / nhãn dọc

?

1. Về điều chỉnh kích thước hộp kiểm : có width, height, size, zoom, scale(có tôi bị mất cái gì?). zoomvà scalekhông cho phép đặt kích thước tuyệt đối, vì vậy họ có thể chỉ giúp điều chỉnh kích thước văn bản, không đặt kích thước trình duyệt chéo (trừ khi chúng tôi có thể viết quy tắc dành riêng cho trình duyệt). sizekhông hoạt động với Chrome (dù sao nó cũng hoạt động với IE cũ? Điều đó không thú vị lắm). widthvà heighthoạt động trong Chrome và các trình duyệt khác, vì vậy chúng tôi có thể đặt kích thước chung, nhưng một lần nữa, trong Chrome, nó đặt kích thước của toàn bộ hình ảnh, chứ không phải chính hộp kiểm. Lưu ý: đó là tối thiểu (chiều rộng, chiều cao) xác định kích thước của hộp kiểm (nếu chiều rộng ≠ chiều cao, diện tích bên ngoài ô vuông được thêm vào "giả lề").

   Một điều đáng tiếc là, các lề giả trong hộp kiểm Chrome không được đặt thành 0 cho bất kỳ chiều rộng và chiều cao nào, theo như tôi có thể thấy.

2. Tôi sợ rằng không có phương pháp chỉ đáng tin cậy CSS ngày nay.

3. Hãy xem xét căn chỉnh dọc. vertical-alignkhông thể đưa ra kết quả nhất quán khi được đặt thành middlehoặc baselinedo lề giả của Chrome, tùy chọn thực sự duy nhất để có cùng "hệ tọa độ" cho tất cả các trình duyệt là căn chỉnh nhãn và nhập vào top:

   

   (trên hình: vertical-align: trên, dưới và dưới không có bóng hộp)

Vì vậy, kết quả nào chúng ta nhận được từ điều này?

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

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

Đoạn mã trên hoạt động với Chrome (trình duyệt dựa trên Chromium), nhưng các trình duyệt khác yêu cầu kích thước hộp kiểm nhỏ hơn. Dường như không thể điều chỉnh cả kích thước và căn chỉnh theo chiều dọc theo cách hoạt động xung quanh việc giải quyết hình ảnh hộp kiểm của Chromium. Đề nghị cuối cùng của tôi là: sử dụng hộp kiểm tùy chỉnh thay thế - và bạn sẽ tránh được sự thất vọng :)

Bây giờ flexbox được hỗ trợ trong tất cả các trình duyệt hiện đại, một cái gì đó như thế này có vẻ như là một cách tiếp cận dễ dàng hơn với tôi.

<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>

Đây là bản demo phiên bản tiền tố hoàn chỉnh:

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>

Tôi nghĩ rằng đây là cách dễ nhất

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

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

Tôi không thích định vị tương đối vì nó làm cho phần tử được hiển thị trên mọi thứ khác ở cấp độ của nó (nó có thể vượt lên trên thứ gì đó nếu bạn có bố cục phức tạp).

Tôi đã phát hiện ra rằng các vertical-align: subhộp kiểm trông đủ tốt để căn chỉnh trong Chrome, Firefox và Opera. Không thể kiểm tra Safari vì tôi không có MacOS và IE10 hơi bị tắt, nhưng tôi thấy đó là giải pháp đủ tốt cho tôi.

Một giải pháp khác có thể là thử và tạo CSS cụ thể cho mọi trình duyệt và tinh chỉnh nó với một số sắp xếp theo chiều dọc theo% / pixel / EMs: http://css-tricks.com/snippets/css/browser-specific-hacks/

Công việc này tốt cho tôi:

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>

Câu trả lời được chọn với hơn 400 lượt upvote không hoạt động với tôi trong Chrome 28 OSX, có lẽ vì nó không được thử nghiệm trong OSX hoặc nó đã hoạt động trong bất cứ điều gì vào khoảng năm 2008 khi câu hỏi này được trả lời.

Thời thế đã thay đổi và các giải pháp CSS3 mới hiện khả thi. Giải pháp của tôi sử dụng giả để tạo hộp kiểm tùy chỉnh . Vì vậy, các quy định (ưu hay nhược điểm, tuy nhiên bạn nhìn vào nó) như sau:

• Chỉ hoạt động trong các trình duyệt hiện đại (FF3.6 +, IE9 +, Chrome, Safari)
• Dựa vào hộp kiểm được thiết kế tùy chỉnh, sẽ được hiển thị giống hệt nhau trong mọi trình duyệt / HĐH. Ở đây tôi chỉ chọn một số màu đơn giản, nhưng bạn luôn có thể thêm độ dốc tuyến tính và như vậy để tạo cho nó nhiều tiếng vang hơn.
• Được hướng đến một kích thước phông chữ / phông chữ nhất định, nếu thay đổi, bạn chỉ cần thay đổi vị trí và kích thước của hộp kiểm để làm cho nó xuất hiện theo chiều dọc. Nếu được điều chỉnh chính xác, kết quả cuối cùng vẫn phải gần giống hệt nhau trong tất cả các trình duyệt / hệ điều hành.
• Không có thuộc tính thẳng hàng, không nổi
• Phải sử dụng đánh dấu được cung cấp trong ví dụ của tôi, nó sẽ không hoạt động nếu được cấu trúc như câu hỏi, tuy nhiên, bố cục về cơ bản sẽ trông giống nhau. Nếu bạn muốn di chuyển mọi thứ xung quanh, bạn cũng sẽ phải di chuyển CSS được liên kết

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>

Giải pháp này ẩn hộp kiểm , thêm và tạo kiểu giả cho nhãn để tạo hộp kiểm hiển thị. Vì nhãn được gắn với hộp kiểm ẩn, trường nhập liệu vẫn sẽ được cập nhật và giá trị sẽ được gửi cùng với biểu mẫu.

Và nếu bạn quan tâm, đây là cách tôi sử dụng các nút radio: http://jsfiddle.net/DtKrV/2/

Hy vọng ai đó thấy điều này hữu ích!

Tôi chưa bao giờ gặp vấn đề với việc làm như thế này:

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

Nếu bạn sử dụng ASP.NET Web Forms, bạn không cần phải lo lắng về DIV và các yếu tố khác hoặc kích thước cố định. Chúng ta có thể căn chỉnh <asp:CheckBoxList>văn bản bằng cách đặt thành float:leftkiểu nhập CheckboxList trong CSS.

Vui lòng kiểm tra mã ví dụ sau:

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

Mã .ASPX:

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

Nếu bạn đang sử dụng Twitter Bootstrap, bạn chỉ có thể sử dụng checkboxlớp trên <label>:

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

Với hộp kiểm loại đầu vào được bọc bên trong nhãn và trôi sang trái như vậy:

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

điều này làm việc cho tôi:

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;
}

Đảm bảo chiều cao của giống hệt với chiều cao của đường thẳng (blocklevel).

Mã hóa chiều cao và chiều rộng của hộp kiểm, loại bỏ phần đệm của nó và làm cho chiều cao của nó cộng với lề dọc bằng với chiều cao của nhãn. Nếu văn bản nhãn là nội tuyến, thả nổi hộp kiểm. Firefox, Chrome và IE7 + đều hiển thị ví dụ sau giống hệt nhau: http://www.kornea.com/css-checkbox-align

Tôi thường để một hộp kiểm không nhãn và sau đó biến "nhãn" của nó thành một thành phần riêng biệt. Thật là khó khăn, nhưng có quá nhiều sự khác biệt giữa trình duyệt giữa cách các hộp kiểm và nhãn của chúng được hiển thị (như bạn đã nhận thấy) rằng đây là cách duy nhất tôi có thể tiến gần đến việc kiểm soát mọi thứ trông như thế nào.

Tôi cũng kết thúc việc này trong phát triển winforms, vì lý do tương tự. Tôi nghĩ vấn đề cơ bản với điều khiển hộp kiểm là nó thực sự là hai điều khiển khác nhau: hộp và nhãn. Bằng cách sử dụng hộp kiểm, bạn để lại cho người thực hiện điều khiển để quyết định cách hai yếu tố đó được hiển thị cạnh nhau (và họ luôn hiểu sai, sai ở đâu = không như bạn muốn).

Tôi thực sự hy vọng ai đó có câu trả lời tốt hơn cho câu hỏi của bạn.

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>

Đoạn mã trên sẽ đặt các mục danh sách của bạn vào threecols và chỉ cần thay đổi độ rộng cho phù hợp.

Những điều sau đây mang lại sự nhất quán hoàn hảo về pixel trên các trình duyệt, thậm chí IE9:

Cách tiếp cận khá hợp lý, đến mức rõ ràng:

1. Tạo một đầu vào và một nhãn.
2. Hiển thị chúng dưới dạng khối, vì vậy bạn có thể thả chúng theo ý muốn.
3. Đặt chiều cao và chiều cao đường thẳng thành cùng một giá trị để đảm bảo chúng nằm giữa và căn chỉnh theo chiều dọc.
4. Đối với các phép đo em , để tính chiều cao của các phần tử, trình duyệt phải biết chiều cao của phông chữ cho các phần tử đó và bản thân nó không được đặt trong các phép đo em.

Điều này dẫn đến một quy tắc chung áp dụng toàn cầu:

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

Với kích thước phông chữ có thể thích ứng cho mỗi hình thức, trường hoặc phần tử.

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

Đã thử nghiệm trên Chrome, Safari và Firefox mới nhất trên Mac, Windows, Iphone và Android. Và IE9.

Phương pháp này có thể áp dụng cho tất cả các loại đầu vào không cao hơn một dòng văn bản. Áp dụng một quy tắc loại cho phù hợp.

Vì vậy, tôi biết điều này đã được trả lời nhiều lần, nhưng tôi cảm thấy tôi có một giải pháp thanh lịch hơn những cách đã được cung cấp. Và không chỉ có 1 giải pháp tao nhã, mà là 2 giải pháp riêng biệt để làm bạn thích thú. Như đã nói, mọi thứ bạn cần biết và nhìn thấy đều được chứa trong 2 JS Fiddle, kèm theo các bình luận.

Giải pháp số 1 dựa vào "Hộp kiểm" gốc của trình duyệt đã cho, mặc dù với một nút xoắn ... Nó chứa trong một div dễ dàng hơn để định vị trình duyệt chéo, với một tràn: ẩn để cắt vượt quá hộp kiểm kéo dài 1px (điều này là để bạn không thể nhìn thấy đường viền xấu xí của FF)

HTML đơn giản: (theo liên kết để xem lại css với các bình luận, khối mã là để đáp ứng stackoverflow) http://jsfiddle.net/KQghJ/

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

Giải pháp số 2 sử dụng "Checkbox Toggle Hack" để chuyển trạng thái CSS của DIV, được định vị chính xác trên trình duyệt và thiết lập với một sprite đơn giản cho hộp kiểm không được chọn và kiểm tra trạng thái. Tất cả những gì cần thiết là điều chỉnh vị trí nền với Checkbox Toggle Hack đã nói. Theo tôi, đây là giải pháp tao nhã hơn khi bạn có nhiều quyền kiểm soát hơn đối với các hộp kiểm & radio của mình và có thể đảm bảo chúng trông giống nhau trên trình duyệt.

HTML đơn giản: (theo liên kết để xem lại CSS với các bình luận, khối mã là để đáp ứng StackOverflow) http://jsfiddle.net/Sx5M2/

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

Nếu bất cứ ai không đồng ý với các phương pháp này, vui lòng để lại cho tôi một nhận xét, tôi rất muốn nghe một số phản hồi về lý do tại sao những người khác không tìm thấy các giải pháp này, hoặc nếu họ có, tại sao tôi không thấy câu trả lời nào ở đây về chúng? Nếu bất cứ ai nhìn thấy một trong những phương pháp này đều thất bại, thì cũng thật tuyệt khi thấy điều đó, nhưng chúng đã được thử nghiệm trong các trình duyệt mới nhất và dựa trên các phương thức HTML / CSS khá cũ và phổ biến như tôi đã thấy.

Yay cảm ơn! Điều này cũng đã được lái tôi mãi mãi.

Trong trường hợp cụ thể của tôi, điều này làm việc cho tôi:

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;
}

Tôi đang sử dụng reset.css có thể giải thích một số khác biệt, nhưng điều này dường như hoạt động tốt với tôi.

position: relative; có một số vấn đề trong IE với chỉ mục z và hình động như slideUp / slideDown của jQuery.

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');
    }
});

Kiểu dáng có thể cần chỉnh sửa tùy thuộc vào kích thước phông chữ được sử dụng trong <label>

PS:
Tôi sử dụng eg7js để làm cho css hoạt động trong IE6.

Sử dụng đơn giản vertical-align: sub, như pokrishka đã đề xuất.

Vĩ cầm

Mã HTML:

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

Mã CSS:

.checkboxes input {
    vertical-align: sub;
}

Giải pháp đơn giản:

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

Đã thử nghiệm trong Chrome, Firefox, IE9 +, Safari, iOS 9+