複選框與標籤中間

我需要弄清楚如何把下一個標籤文本複選框按鈕。我需要複選框按鈕中間的文字。我總是將複選框放在文本的上方或稍下方。很難把它完全放在中間。當我在一個瀏覽器中固定到中間位置時，在其他瀏覽器中它不完全在中間。總有一個像素或兩個像素會毀掉它。複選框與標籤中間

這裏的小提琴 http://jsfiddle.net/JhPHm/

<style> 
.field input 
{ 
    margin: 0; 
    padding: 0; 
    vertical-align: top; 
} 
.field label 
{ 
    margin: 0; 
    padding: 0; 
    vertical-align: top; 
    font: normal 12px/14px arial; 
} 
</style> 

<div style="padding: 30px;"> 

<div class="field"> 
    <label for="x"><input type="checkbox" id="x" name="x" value="1" /> Text in the middle</label> 
</div> 

</div>

請幫我把在所有的瀏覽器中的文本。這裏有一個圖片有差異： http://img708.imageshack.us/img708/5410/checkbox.png

來源

2012-10-25 Alvarez

我很願意回答這個。多年來一直讓我瘋狂。我能夠解決這個問題的唯一方法是在複選框或標籤上使用相對定位，但正如您指出的，這不會對瀏覽器非常友好。 –

而不是vertical-align:top，試試vertical-align:middle。它可能會有所幫助，但是輸入元素在瀏覽器中不均勻是衆所周知的。

來源

2012-10-25 18:44:15 coopersita

是的，我試過了，實際上並沒有給出更好的結果 – Alvarez

對齊輸入元素是艱難的，有時幾乎是不可能的。

如果問題是，它的行爲不端在舊的瀏覽器，考慮到人們在瀏覽網頁與這些瀏覽器將在更多的地方在錯位複選框絆倒不僅僅是你的。他們正在瀏覽網頁，而它正在圍繞它們搖搖欲墜。他們不會關心，因爲他們要麼知道他們使用的是舊瀏覽器，要麼他們沒有注意到，因爲所有網站都顯示這些微小的故障。

如果你將不得不爲各種瀏覽器添加各種調整和修復以達到可接受的最終結果，還要考慮到所有這些調整都會增加CSS的大小並增加複雜性，使其變得更加困難保持在未來。

到底對我來說，這個東西要看觀衆，預算和明顯複選框量。 ;-)

來源

2012-10-25 19:37:33 Rik

我解決這個黑客攻擊的方法是使用相對定位，就像這樣：

input[type="radio"], input[type="checkbox"] { 
    cursor: pointer; 
    line-height: normal; 
    margin: 0px; 
    position: relative; 
    top: -3px; 
}

例如，如果你想給他們3個像素上移。就像你上面指出的那樣，你可能在不同的瀏覽器中得到不同的結果。

在這種情況下，螢火蟲或Chrome開發者工具將幫助你很多。你可能會從別處繼承一些垃圾。就像在上面的例子中，我將邊距設置回0px，因爲CSS結構中更高（並且不可避免）的東西是在所有輸入上設置4px的邊距並擰緊我。

祝你好運！

來源

2013-01-24 21:37:46

複選框與標籤中間

回答

相關問題