3ボタンが縦に異なっ

Question

問題は、それが均等に

<div> 
    <button type="button" onclick="ab('*');" class="bbold">B</button> 
    <button type="button" onclick="ab('_');" class="bitalic">I</button> 
    <button type="button" onclick="ab('code');" class="bcode">{code}</button> 
</div> 

---

整列のものより私はbitalicからフォントファミリを削除する場合 Iボタンは、（特にクロムで）少し低くとどまるということです揃えます

.bbold, .bitalic, .bcode 
{ 
    height: 30px; 
    min-width: 30px; 
} 
.bbold { 
    font-weight: bold;   
} 
.bitalic 
{ 
    font-family: "Times New Roman"; 
    font-style: italic; 
    font-weight: bold;   
} 
.bcode 
{ 
    font-family: consolas, courier;  
} 

Answer 1

私は、要素が正しくhorisontally並ぶようにする最も一般的な解決策は、CSSのfloatを使用することであると思う：左：

.bbold, .bitalic, .bcode 
{ 
    float: left; 
    height: 30px; 
    min-width: 30px; 
} 

Answer 2

は、すべてのボタンの上に30pxする行の高さを設定するようにしてください、これは通常、それを修正する必要があります

.bbold, .bitalic, .bcode 
{ 
    height: 30px; 
    min-width: 30px; 
    line-height: 30px; 
} 

Answer 3

font-styleを変更するには、それをレンダリングするために必要なスペースや寸法を変更します。

設定text-align:text-bottom;で解決する必要があります。