अलग-अलग फ़ॉन्ट्स के साथ 3 बटन लंबवत रूप से संरेखित होते हैं

समस्या यह है कि I बटन थोड़ी कम रहता है (विशेष रूप से क्रोम में), अगर मैं समान रूप से गठबंधन की तुलना में फ़ॉन्ट-परिवार को बाइटलिक से हटा देता हूं

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

.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;    
}
0

3 उत्तर

मुझे लगता है कि तत्वों को सही ढंग से क्षैतिज रूप से लाइन बनाने के लिए सबसे आम समाधान सीएसएस फ्लोट का उपयोग करना है: बाएं:

.bbold, .bitalic, .bcode
{
    float: left;
    height: 30px;
    min-width: 30px;
}
1
जोड़ा

सभी बटनों पर लाइन-ऊंचाई को 30px पर सेट करने का प्रयास करें, इसे सामान्य रूप से ठीक करना चाहिए:

.bbold, .bitalic, .bcode
{
    height: 30px;
    min-width: 30px;
    line-height: 30px;
}
1
जोड़ा

फ़ॉन्ट-शैली को बदलने से इसे स्थानांतरित करने के लिए आवश्यक स्थान और आयाम बदल जाता है।

टेक्स्ट-एलाइन सेट करना: टेक्स्ट-तल; इसे हल करना चाहिए।

1
जोड़ा