的文字不基線

在下面的代碼：的文字不基線

<p><input type="checkbox" /> Pavement 
<input type="checkbox" /> Dirt or rocky trails 
<input type="checkbox"/> Gravel roads</p>

與下面的CSS一起：

h1, input, button, textarea, progress, p, a, ul, li { 
    font-family: "Open Sans", sans-serif; 
    font-size: 10pt; 
    color: #666; 
    letter-spacing: normal; 
    text-indent: 0; 
    text-shadow: 0 1px 0 hsla(0,0%,100%,.75); 
    margin: 10px 2px; 
} 

input[type="checkbox"], input[type="radio"] { 
    background-color: #f4f4f4; 
    background-image: -webkit-linear-gradient(90deg, hsla(0,0%,0%,.05), hsla(0,0%,0%,.01)); 
    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.5), 
       0 1px 2px hsla(0,0%,0%,0.5); 
    border: none; 
    cursor: pointer; 
    height: 16px; 
    width: 16px; 
    position: relative; 
    -webkit-appearance: none; 
}

的複選框似乎是有關其他文本近一行。我試圖刪除所有的CSS和問題已解決（問題也解決了，當我刪除所有自定義複選框樣式），但是當我開始刪除/替換CSS行，我找不到問題。有任何想法嗎？謝謝！

來源

2012-12-28 tehsockz

我包下一個標籤標記和樣式那些直接輸入文本。 – kinakuta

我建議添加和擺弄CSS屬性'line-height'，直到你按照你想要的方式得到它。先在Chrome中嘗試類似-8px的東西 – khaverim

我[沒有看到它]（http://jsfiddle.net/BLpks/）。正如你所描述的那樣，我認爲'你好'應該在其他文本下幾個像素？ – jmeas

這是你的問題：

margin: 10px 2px;

Get rid of it and you're golden

或者，如果你想保持它的一些元素，但不是你的複選框和單選按鈕，you could do something like this

h1, input, button, textarea, progress, p, a, ul, li { 
    ... 
    margin: 10px 2px; 
} 
input[type="checkbox"], input[type="radio"] { 
    ... 
    margin: 0px 2px; 
}

來源

2012-12-28 19:29:25 jmeas

工程就像一個魅力！非常感謝。 – tehsockz

添加vertical-align: middle;到你的複選框應該修復它。

即

input[type="checkbox"], input[type="radio"] { 
... 
    vertical-align: middle; 
}

來源

2012-12-28 19:30:35 techfoobar

這個也可以工作，並保持利潤率。也謝謝你！ – tehsockz

的文字不基線

回答

相關問題