這是困擾個人CSS的小問題之一。 Stack Overflow周圍的人們如何垂直對齊checkboxes
而且他們的labels
始終跨瀏覽器 ? 每當我在Safari中正確對齊它們(一般在input
上使用vertical-align: baseline
)時,它們在Firefox和IE中就徹底關閉。 在Firefox中對其進行修復,不可避免地將Safari和IE弄亂了。 每次編寫表單時,我都會在此上浪費時間。 javascript
這是我使用的標準代碼: css
<form> <div> <label><input type="checkbox" /> Label text</label> </div> </form>
我一般使用Eric Meyer的重置,所以表單元素相對而言是覆蓋不大的。 期待您提供的任何提示或技巧! html
只是想在標籤上添加關於'for'屬性的討論(略微偏離主題): java
即便沒有必要,請提供它,由於從javascript使用很是方便: 瀏覽器
var label = ... var input = document.getElementById(label.htmlFor);
這比試圖弄清楚標籤的輸入是否嵌套,或者輸入是在標籤以前,仍是以後......等等都要方便得多。並且它永遠不會傷害它。因此。 ide
只需2美分。 佈局
若是您使用的是Twitter Bootstrap,則可使用<label>
上的checkbox
類: 測試
<label class="checkbox"> <input type="checkbox"> Remember me </label>
我尚未徹底測試個人解決方案,可是它彷佛工做得很好。 字體
個人HTML很簡單: spa
<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使用並行表示歉意):
選擇的具備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/
但願有人以爲這有用!
我認爲這是最簡單的方法
input { position: relative; top: 1px; }
<form> <div> <label><input type="checkbox" /> Label text</label> </div> <form>