向右浮动使文本看起来更小

Question

我有这个 html :

.CONNECT-WITH-US {
        font-family: "Open Sans";
        font-size: 8px;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #141b2f;
        padding: 5px 24px 0 24px;
    }
    
    .connect {
        float: right;
    }

<div class="CONNECT-WITH-US"><label>CONNECT WITH US</label><label class="connect">CONNECT WITH US</label></div>

此代码在小屏幕（移动设备）中看起来像这样 div 中的第二个标签越来越小的文本。是因为浮动吗？

Answer 1

我在代码中做了一些编辑

适用于手机屏幕。可能我没听懂你想问什么...

.CONNECT-WITH-US {
    font-family: "Open Sans";
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #141b2f;
    padding: 5px 24px 0 24px;
}



.CONNECT-WITH-US .label-2 {
    float: right;
}

<div class="CONNECT-WITH-US">
<label>CONNECT WITH US</label>
<label class="label-2">CONNECT WITH US</label>
</div>

Answer 2

.CONNECT-WITH-US {
        font-family: "Open Sans";
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #141b2f;
        padding: 5px 24px 0 24px;
    }
    
    .connect {
        float: right;
    }

<div class="CONNECT-WITH-US"><label>CONNECT WITH US</label><label class="connect">CONNECT WITH US</label></div>

出于某种原因，font-size 似乎使屏幕上的一段文字变小了。即使在片段中，事情也能正常工作。似乎如果您在 phone 上，那么 float: right 播放效果不佳，并且使一段文本成为原始 <p> 大小，而另一段是 8 pixels 您宣布。如果您真的致力于在 phone 上使用该尺寸，您可以尝试某种 @media CSS 以在较小的屏幕上使样式有所不同。

向右浮动使文本看起来更小

float right making text looks smaller

html

css

css-float