Soru Onay kutularını ve etiketlerini tutarlı şekilde çapraz tarayıcılar nasıl hizalar?


Bu sürekli beni rahatsız eden küçük CSS sorunlarından biridir. Yığın Taşması etrafındaki insanlar dikey olarak nasıl hizalanır? checkboxes ve onların labels sürekli çapraz tarayıcı? Her zaman Safari'de doğru şekilde hizaladığımda (genellikle vertical-align: baseline üzerinde input), Firefox ve IE'de tamamen kapalı. Firefox'ta düzeltin ve Safari ve IE kaçınılmaz olarak berbat. Her zaman bir formun kodunu yazarak zaman harcıyorum.

İşte çalıştığım standart kod:

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

Ben genellikle Eric Meyer'in resetini kullanırım, bu yüzden form öğeleri geçersiz kılmalardan nispeten temizdir. Sunduğunuz herhangi bir ipucu veya püf noktası için bekliyorum!


1508


Menşei


Her onay kutusunu ve etiketini bir <li> öğesi içine koyun. Taşma ekle: <li> 'ye gizlendi ve etiketi ve onay kutusunu boş bıraktı. Sonra hepsi mükemmel bir şekilde hizalandı. Onay kutusunu açık bir şekilde etiket elemanına koymayın. - volume one
Kullanarak elde ettim height ve line-height öznitelikleri, bir göz atın jsfiddle.net/wepw5o57/3 - TheGr8_Nik
İle manipülasyon position ve top Bu sorunu çözecek Örnek: jsfiddle.net/ynkjc22s - Profesor08


Cevaplar:


Bir saatten fazla süren bir düzeltme, test etme ve farklı stil stillerini denemeden sonra, iyi bir çözüm bulabileceğimi düşünüyorum. Bu projenin gereksinimleri şunlardı:

  1. Girişler kendi satırlarında olmalıdır.
  2. Onay kutusu girişleri, tüm tarayıcılarda benzer şekilde (aynı şekilde değilse) etiket metni ile dikey olarak hizalanmalıdır.
  3. Etiket metnini sararsa, girintili olması gerekir (bu nedenle onay kutusunun altına sarılmamalıdır).

Herhangi bir açıklama yapmadan önce size kodu vereceğim:

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>

İşte çalışma örneği JSFiddle.

Bu kod, Eric Meyer gibi, giriş girdi kenar boşluklarını ve dolgulamayı geçersiz kılmayan bir sıfırlama kullandığınızı varsayar (dolayısıyla CSS girişine kenar boşluğu ve doldurma sıfırları koyma). Açıkçası, canlı bir ortamda, diğer girdi unsurlarını desteklemek için büyük olasılıkla yuvalama / geçersiz kılma olacaktır, ancak işleri basit tutmak istedim.

Dikkat edilmesi gerekenler:

  • *overflow Bildiri, bir inline IE hack (star-property hack) 'dir. Hem IE 6 hem de 7 bunu fark edecek, ancak Safari ve Firefox bunları uygun şekilde görmezden gelecek. Geçerli bir CSS olabileceğini düşünüyorum, ancak şartlı yorumlarla hala daha iyisiniz; sadece sadelik için kullandı.
  • En iyi şekilde söyleyebilirim ki, sadece vertical-align tarayıcılarda tutarlı olan ifade vertical-align: bottom. Bunu ayarlama ve daha sonra göreceli olarak konumlandırma, Safari, Firefox ve IE'de hemen hemen aynı şekilde davranarak sadece bir piksel veya iki tutarsızlık gösterdi.
  • Hizalama ile çalışmanın en önemli problemi, IE'nin giriş elemanları etrafında bir sürü gizemli alan yapmasıdır. Dolgu ya da kenar boşluğu değil ve kalıcı. Onay kutusundaki genişlik ve yüksekliği ayarlama ve ardından overflow: hidden bir sebepten dolayı ekstra alanı keser ve IE'nin konumlandırmasının Safari ve Firefox'a çok benzer hareket etmesini sağlar.
  • Metin boyutunuza bağlı olarak, herhangi bir şey doğru bakmak için göreceli konumlandırma, genişlik, yükseklik ve benzerlerini ayarlamanız gerekmeyecektir.

Umarım bu bir başkasına yardım eder! Bu özel tekniği, bu sabah çalıştığımdan başka bir projede denemedim, bu yüzden daha tutarlı bir şekilde çalışan bir şey bulursanız kesinlikle borulara bağlanın.


914



Not. Tüm tarayıcılar ve metin okuyucuları için çalışmasını sağlamak için muhtemelen etiketinize "for" özelliği eklemelisiniz. (Muhtemelen basitlik için onu terk ettiğinizi anlıyorum) - Armstrongest
İyi bir keder, kaç insanın bundan cahil olduğunu fark etmemiştim: Eğer girdiyi etiket etiketine koyarsanız, "for" özniteliği gereksizdir. Kendiniz için çekinmeyin: w3.org/TR/html401/interact/forms.html#h-17.9.1 - One Crayon
Vay, ben de burada suçluluk kabul ediyorum. Giriş kontrol etiketleri FTW! Bundan böyle devam etmek ... - cowgod
Koşullu yorumları kullanma önerisine katılmıyorum. * Foobar CSS hackini koruyun. Bu iyi çalışır, YUI gibi çerçeveler tarafından kullanılır ve birlikte ait olanları bir arada tutmanıza izin verir. - ebruchez
Bunu Chrome 28, Mac OSX'te denedim ve onay kutusu metinden daha düşük görünür - MusikAnimal


Bazen dikey hizalama düzgün çalışması için yan yana iki satır içi (açıklık, etiket, giriş, vb ...) elemanlara ihtiyaç duyar. Aşağıdaki onay kutuları, metin boyutu çok küçük veya büyük olsa bile IE, Safari, FF ve Chrome'da dikey olarak ortalanır.

Hepsi aynı çizgide yan yana yüzer, ama şimdiki ifade, bütün etiket metninin her zaman onay kutusunun yanında kaldığı anlamına gelir.

Dezavantajı, ekstra anlamsız SPAN etiketleri.

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

Şimdi, çok uzun bir etiket metniniz varsa gerekli onay kutusunun altına sarmadan sarmak için etiket öğelerinde dolgu ve negatif metin girintisini kullanırsınız:

.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



Teşekkürler! Hem giriş hem de açıklıktaki "dikey hizalama: orta" benim için harika çalıştı. - William Gross
display: block; float: left; gereksiz görünüyor - PHPst
yani atlamak için iyi değil for span kullanılıyorsa özellik? (One Crayon'un kabul ettiği cevapta yorumladığı gibi) w3.org/TR/html401/interact/forms.html#h-17.9.1 - parliament
Etiketteki girdiye sahip olduğunuzda bir özellik kullanmak zorunda değilsiniz. Onsuz çalışır. - Tommy Sørensen
Bu benim görüşüme göre kabul edilen cevap olmalı. Gerekli bir düzenleme yoktur. - Tim


Çalışma Bir Crayon'un çözümüBenim için çalışan bir şey var ve daha basit:

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>

Safari'de piksel için aynı olanı (başlangıç ​​noktası güvendiğim) ve hem Firefox hem de IE7'nin iyi olduğunu kontrol edin. Ayrıca büyük ve küçük çeşitli etiket yazı tipi boyutları için çalışır. Şimdi, IE'nin temelini seçimler ve girişler üzerinde sabitlemek için ...


155



Diğerleri için bir not: Bu, IE6'da çalışmaz çünkü [type = checkbox] CSS hedeflemesini desteklemez. - One Crayon
IE6 desteği gerekiyorsa desteklenmeyen seçicileri kullanmak yerine bir sınıf ekleyebilirsiniz. - HartleySan
testlerime göre kullanmak daha iyidir bottom: 2px ikisi için input[type=checkbox] ve input[type=radio]. Ayrıca, bu IE7'de ayarlanmamalı, dolayısıyla onu yıldız hackiyle 0'a atabiliriz: bottom: 2px; *bottom: 0; - S.Serp
Bu benim için çalıştı. Ancak, "position: relative; bottom: 1px" değerini ayarlamak yerine, aynı sonucu elde etmek için "margin: 0 0 1px 0" değerini kullanabilirsiniz. - newman


İyi çalıştığı görülen kolay bir şey, onay kutusunun dikey konumunu dikey hizalama ile ayarlamaktır. Yine de tarayıcılarda farklılık gösterecektir, ancak çözüm karmaşık değildir.

input {
    vertical-align: -2px;
}

Referans


117



Bu, diğer tarayıcıların en son sürümlerinde benim için çalışan, diğerleri arasında en küçük değişiklikti. - Johnny_D
Bu daha iyi çalışır vertical-align ve position: relative çünkü IE9'da da doğru çalışıyor :) - Dennis98
ancak yazı tipi boyutuna göre değişir. büyük yazı tipi boyutları için, daha yüksek negatif değerlere ayarlanmalıdır, örneğin: dikey hizalama: -6px; - S.Serp


Deneyin vertical-align: middle

Ayrıca kodunuz olması gerektiği gibi görünüyor:

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


77



<label for="blah"> Etiketin sarılması için bir anlam ifade etmeyen bir şey kullanıyorsanız (yalnızca bir metin kutusu gibi), genellikle kullanacağım <label for="blah">Foo</label><input id="blah" type="text" /> bu durumda). Onay kutuları ile onu sarmak için daha az işaretleme buluyorum. - One Crayon
Tam olarak doğru değil: Label-for (Etiketle), kullanıcıların yalnızca onay kutusunu tıklamanın yanı sıra onay kutusunu işaretlemek için etiketi tıklatmasına izin verir. İki elemanı birbirine bağlamak için oldukça kullanışlıdır. - EndangeredMassa
Bir giriş bir etiketin içine yerleştirilirse, girişe etkinleştirme / odaklama ile etiketin tıklanması; öznitelik, girdinin iç içe olmadığında yalnızca durum içindir. - One Crayon
Bu One Crayon, ama "for" özelliğini kullanmak için hala iyi bir uygulama, ya da bu sözdizimini tanımayan bazı tarayıcılarda sorun yaşayacaksınız. öksürük IE. - Armstrongest
Onay kutunuzun kimliğinin olmasını istemiyorsanız, onay kutusunun etiketin içine sarılması gerekir. - Simon_Weaver


Çözümü deneyin, IE 6, FF2 ve Chrome'da denedim ve üç tarayıcıda piksel olarak piksel oluşturuyor.

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



İlginç; Her iki öğeyi de yüzdürme fikrini seviyorum; Bu, sarma sorununu zarif bir şekilde giderir. ben ben etiketli girdiyi eklemeye bağlı, ancak bu kod, geldiğim çözümden çok daha temiz bir cihaz. - One Crayon
bu örnekte, onay kutusu girişi ve etiketinde ayrıca özellik göstergesi olmalıdır: blok ve bu durumda kolayca hizalanabilecek normal DIV'ler olarak ele alınacaktır. - se_pavel
Bu bir sorun var, etiket mevcut alana sığmazsa ne olur? etiket ve onay kutusu ayrılır (onay kutusu sağ üstte ve etiket aşağı-sol). Etiketi etiketinizin içine koyarsanız, bu sorunla karşılaşmazsınız. - Enrique
Piksel için işe yaramadı, ama 3 önemli tarayıcıda daha iyi görünmesi için yeterince iyi. Sanırım daha iyi çalışacağını görmek için bir saat daha harcayabilirdim. - Alexis Wilke


Benim için tek mükemmel çalışan çözüm:

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

Bugün Chrome, Firefox, Opera, IE 7 ve 8'de test edildi. Örnek: Keman


24



Chrome v43'te çalışmıyor - Mert Metin
Chrome ve Safari'de bugün test edildi ve çalışıyor - Buzogany Laszlo