Floating-Symbol ist vertikal ausgerichtet in jsfiddle aber nicht im lokalen Browser

Ich habe eine Dropdown-Box mit Text und einem umgekehrten Dreieck am rechten Ende. Ich sehe ein Problem auf meinen lokalen Browsern, sowohl firefox & Chrom, wo das Dreieck nach oben ausgerichtet ist. Es sieht aus wie,Floating-Symbol ist vertikal ausgerichtet in jsfiddle aber nicht im lokalen Browser

Ich bin nicht so ein Problem zu sehen, wenn ich den Code auf jsfiddle laufen. Prüfen here ..

I line-height Eigenschaft bin mit vertikal auszurichten, wie,

.fa-caret-down{  
    line-height: 40px; 
} 

    .btn-text{ 
    line-height: 40px; 
    }

Warum wird mein lokaler Browser anders verhalten? Und gibt es eine Möglichkeit, das Symbol in die Mitte zu verschieben?

Quelle

2016-04-14 Madhavan Kumar

Ist nicht die Standardschrift line-height, die Ihre 40px eine überschreibt? Versuchen Sie line-height: 40px !important; und überprüfen Sie das Ergebnis. Wenn nicht, posten Sie einen Screenshot aus dem Inspektor mit diesen Dropdown-Eigenschaften.

Quelle

2016-04-14 16:54:15

Sie recht, Mann ... 'fa-caret' line-height außer Kraft gesetzt wurde .. –

Glad zu helfen;) –

Ich weiß nicht, warum Ihr lokaler Browser nicht das richtige Design zeigt. In meinem Firefox 45.0.2 ist alles in Ordnung.

Sind Sie sicher, dass Ihr Code gleich ist?

<html> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css"> 
<head> 
<style type="text/css"> 
body{ 
    background-color: #e3e4e5; 
} 
.drp-down-btn{ 
    margin: 20px; 
    height: 40px; 
    background-color: #fff; 
    display: inline-block; 
    padding: 4px; 
    width: 150px; 
} 
.fa-caret-down{  
    line-height: 40px; 
} 

    .btn-text{ 
    line-height: 40px; 
    } 
</style> 
</head> 
<body> 
<div class="drp-down-btn"> 
    <span class="btn-text"> My caption</span> 
    <i class="fa fa-lg fa-caret-down" style="vertical-align:baseline;float:right;"></i> 
</div> 

</body> 
</html>

Quelle

2016-04-14 16:56:00

Floating-Symbol ist vertikal ausgerichtet in jsfiddle aber nicht im lokalen Browser

Antwort

Verwandte Themen