Câu hỏi Cách căn chỉnh hộp kiểm và nhãn của chúng một cách nhất quán giữa các trình duyệt


Đây là một trong những vấn đề CSS nhỏ khiến tôi liên tục. Làm thế nào để mọi người xung quanh Stack Overflow sắp xếp theo chiều dọc checkboxes và của họ labels nhất quán Qua trình duyệt? Bất cứ khi nào tôi sắp xếp chúng một cách chính xác trong Safari (thường sử dụng vertical-align: baseline trên input), chúng hoàn toàn tắt trong Firefox và IE. Sửa chữa nó trong Firefox, và Safari và IE là không thể tránh khỏi sai lầm. Tôi lãng phí thời gian cho việc này mỗi khi tôi viết một biểu mẫu.

Đâ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 phần tử biểu mẫu tương đối rõ ràng về các phần ghi đè. Rất mong nhận được bất kỳ mẹo hoặc thủ thuật nào mà bạn cung cấp!


1508


gốc


Đặt từng hộp kiểm và nhãn trong phần tử <li>. Thêm tràn: ẩn vào <li> và thả nhãn và hộp kiểm sang trái. Sau đó, tất cả đều hoàn toàn phù hợp. Không đặt hộp kiểm trong phần tử nhãn rõ ràng. - volume one
Tôi đã đạt được nó bằng cách sử dụng height và line-height các thuộc tính, hãy xem jsfiddle.net/wepw5o57/3 - TheGr8_Nik
Thao tác với position và top sẽ giải quyết vấn đề này jsfiddle.net/ynkjc22s - Profesor08


Các câu trả lời:


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

  1. Các đầu vào phải nằm trên dòng riêng của chúng.
  2. Đầu vào hộp kiểm cần phải 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 vào (vì vậy không có gói xuống 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ụ làm việc 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 mà không ghi đè lên lề đầu vào hình thức và đệm (do đó đặt lề và đệm đặt lại trong CSS đầu vào). Rõ ràng là trong một môi trường sống, bạn có thể sẽ làm tổ / ghi đè nội dung để 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 *overflow tuyên bố là một hack IE nội tuyến (hack tài sản sao). Cả IE 6 và 7 sẽ nhận thấy 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ỉ cần sử dụng nó để đơn giản.
  • Tốt nhất tôi có thể nói, chỉ vertical-align tuyên bố nhất quán trên các trình duyệt là vertical-align: bottom. Thiết lập này và sau đó tương đối định vị trở lên cư xử gần như giống hệt nhau trong Safari, Firefox và IE với chỉ một hoặc hai điểm khác biệt.
  • Vấn đề chính trong làm việc với sự liên kết là IE dính một loạt các không gian bí ẩn xung quanh các yếu tố đầu vào. Nó không phải là padding hoặc margin, và nó damned dai dẳng. Đặt chiều rộng và chiều cao trên hộp kiểm và sau đó overflow: hidden vì một số lý do cắt giảm 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 sẽ không nghi ngờ gì cần phải điều chỉnh vị trí tương đối, chiều rộng, chiều cao, v.v. để có được những thứ trông đúng.

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 mà tôi đang làm vào sáng nay, nên chắc chắn sẽ đi lên nếu bạn tìm thấy thứ gì đó hoạt động ổn định hơn.


914



chú thích. Có lẽ bạn nên đặt thuộc tính "cho" trên nhãn của mình, để đảm bảo nó hoạt động cho tất cả trình duyệt và trình đọc văn bản. (Tôi nhận ra bạn có thể để nó ra để đơn giản) - Armstrongest
Tốt đau buồn, tôi đã không nhận ra bao nhiêu người đã không biết gì về điều này: nếu bạn đang gói đầu vào trong thẻ nhãn, thuộc tính "for" là không cần thiết. Cảm thấy tự do để xem cho chính mình: w3.org/TR/html401/interact/forms.html#h-17.9.1 - One Crayon
Wow, tôi cũng đã nhận tội ở đây. Nhãn xung quanh các điều khiển đầu vào FTW! Sẽ làm điều này từ bây giờ ... - cowgod
Tôi không đồng ý với đề xuất về việc sử dụng các nhận xét có điều kiện. Giữ * foobar CSS hack. Điều đó hoạt động tốt, được sử dụng bởi các khung công tác như YUI và cho phép bạn giữ lại những gì thuộc về nhau. - ebruchez
Đã thử tính năng này trong Chrome 28, Mac OSX và hộp kiểm hiển thị thấp hơn văn bản - MusikAnimal


Đôi khi dọc-align cần hai yếu tố nội tuyến (span, label, input, etc ...) bên 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 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 trôi nổi bên cạnh nhau trên cùng một dòng, nhưng cái bẫy 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.

.checkboxes label {
  display: block;
  float: left;
  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 thiết để bọc mà không gói trong hộp kiểm, bạn sẽ sử dụng phần đệm và văn bản tiêu cực thụt lề trên các phần tử nhãn:

.checkboxes label {
  display: block;
  float: left;
  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</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>


170



Cảm ơn! Các "dọc-align: trung" trên cả đầu vào và khoảng thời gian làm việc tuyệt vời cho tôi. - William Gross
display: block; float: left; dường như là thừa - PHPst
vậy là không được bỏ qua for thuộc tính nếu sử dụng span? (như One Crayon đã nhận xét trong câu trả lời được chấp nhận) w3.org/TR/html401/interact/forms.html#h-17.9.1 - parliament
Bạn không phải sử dụng thuộc tính cho khi bạn có đầu vào bên trong nhãn. Nó hoạt động mà không có nó. - Tommy Sørensen
Đây là câu trả lời được chấp nhận bởi ý kiến ​​của tôi. Không cần phải tinh chỉnh. - Tim


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

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>

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


155



Chỉ cần một lưu ý cho những người khác: điều này sẽ không hoạt động trong IE6 bởi vì nó không hỗ trợ nhắm mục tiêu CSS [type = checkbox]. - One Crayon
Bạn chỉ có thể thêm một lớp thay vì sử dụng bộ chọn không được hỗ trợ nếu cần hỗ trợ IE6. - HartleySan
theo thử nghiệm của tôi, tốt hơn là sử dụng bottom: 2px cho cả hai input[type=checkbox] và input[type=radio]. Ngoài ra, điều này không nên được đặt trong IE7, vì vậy chúng tôi có thể ghi đè lên 0 bằng cách hack sao: bottom: 2px; *bottom: 0; - S.Serp
Cái này làm việc cho tôi. Tuy nhiên, thay vì thiết lập "position: relative; bottom: 1px", bạn có thể sử dụng "margin: 0 0 1px 0" để đạt được kết quả tương tự. - newman


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

input {
    vertical-align: -2px;
}

Tài liệu tham khảo


117



Đó là sự thay đổi nhỏ nhất trong số tất cả những thứ khác, điều này có tác dụng đối với tôi trong hầu hết các phiên bản trình duyệt gần đây. - Johnny_D
Điều đó hoạt động tốt hơn so với vertical-align và position: relative vì nó cũng hoạt động chính xác trong IE9 :) - Dennis98
nhưng nó phụ thuộc vào kích thước phông chữ. đối với các kích thước phông chữ lớn, nó phải được điều chỉnh thành các giá trị âm cao hơn, ví dụ: vertical-align: -6px; - S.Serp


thử vertical-align: middle

mã của bạn có vẻ như là:

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


77



<label for="blah"> chỉ cần thiết nếu bạn đang sử dụng một cái gì đó mà nó không có ý nghĩa cho nhãn để bọc (như một hộp văn bản, tôi thường sẽ sử dụng <label for="blah">Foo</label><input id="blah" type="text" /> trong trường hợp đó). Với hộp kiểm, tôi thấy nó ít đánh dấu hơn để bọc nó. - One Crayon
Không chính xác đúng: Nhãn cho sẽ cho phép người dùng nhấp vào nhãn để chọn hộp kiểm, ngoài việc chỉ cần nhấp vào hộp kiểm. Nó khá tiện dụng để buộc hai yếu tố lại với nhau. - EndangeredMassa
Nếu đầu vào được lồng trong nhãn, sau đó nhấp vào nhãn bằng cách kích hoạt / đưa tiêu điểm vào đầu vào; thuộc tính for chỉ dành cho trường hợp đầu vào không được lồng vào nhau. - One Crayon
Đó là sự thật Một Crayon, nhưng nó vẫn là thực hành tốt để sử dụng thuộc tính "for", hoặc bạn sẽ gặp vấn đề với một số trình duyệt không nhận ra cú pháp này ho I E. - Armstrongest
nếu bạn không muốn hộp kiểm của mình có ID thì bạn cần phải cuộn hộp kiểm bên trong nhãn - Simon_Weaver


Hãy thử giải pháp của tôi, tôi đã thử nó trong IE 6, FF2 và Chrome và nó ám pixel bằng 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>


36



Hấp dẫn; Tôi thích ý tưởng nổi cả hai yếu tố; sửa chữa các vấn đề gói một cách trang nhã. tôi là gắn liền với gói đầu vào với nhãn, nhưng mã đó là một heck của sạch hơn rất nhiều so với các giải pháp tôi đến. - One Crayon
trong ví dụ này, đầu vào và nhãn hộp kiểm cũng phải có hiển thị thuộc tính: chặn và trong trường hợp này chúng sẽ được coi là DIV bình thường có thể được căn chỉnh dễ dàng - se_pavel
điều này có vấn đề, điều gì sẽ xảy ra nếu nhãn không phù hợp với không gian có sẵn? nhãn và hộp kiểm được phân tách (hộp kiểm ở trên cùng bên phải và nhãn ở bên trái). Nếu bạn quấn hộp kiểm bên trong nhãn của mình, bạn không gặp phải vấn đề này. - Enrique
Nó không hoạt động với pixel, nhưng nó đủ phong nha để làm cho mọi thứ trông đẹp hơn trên 3 trình duyệt chính. Tôi cho rằng tôi có thể dành thêm một giờ nữa để thấy rằng nó sẽ hoạt động tốt hơn ... - Alexis Wilke


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

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

Được thử nghiệm hôm nay trong Chrome, Firefox, Opera, IE 7 và 8. Ví dụ: Vĩ cầm


24



Nó không hoạt động trong Chrome v43 - Mert Metin
đã thử nghiệm trong Chrome và Safari hôm nay và đang hoạt động - Buzogany Laszlo


Tôi thường sử dụng chiều cao dòng để điều chỉnh vị trí thẳng đứng của văn bản tĩnh của mì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>

Hy vọng rằng sẽ giúp.


16



Chỉ làm việc cho tôi, thx - vinidog


Tôi đã không hoàn toàn kiểm tra giải pháp của tôi, nhưng nó có vẻ làm việc tuyệt vời.

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 để 24px cho cả chiều cao và chiều rộng. Để làm cho văn bản được căn chỉnh, tôi tạo nhãn line-height cũng thế 24px và chỉ định vertical-align: top; như vậy:

CHỈNH SỬA: Sau khi thử nghiệm IE tôi đã thêm vertical-align: bottom; cho đầ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 để phân loại đệ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;
}

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

screenshot of checkboxes: Chrome screenshot of checkboxes: IE


12





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

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

Vĩ cầm


9



câu hỏi là: nó hoạt động tốt trong tất cả các trình duyệt? ;-) - SchweizerSchoggi
có cho Opera, Chrome, FireFox và IE11 mới nhất - gidzior


Công việc này phù hợp với 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>


9



ban phước cho bạn để sử dụng ems thay vì pxs. - IDisposable