【问题标题】:float right making text looks smaller [closed]向右浮动使文本看起来更小[关闭]
【发布时间】:2019-08-01 19:31:58
【问题描述】:

我有这个 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 中的第二个标签文本变小。 是因为浮动吗?

【问题讨论】:

  • 考虑发布您的代码并正确描述您的问题。见stackoverflow.com/help/how-to-ask。是不是 font-size : 8px 导致了您的问题?
  • 你能解释一下是什么变小了
  • 不,这是整个 div 的大小(两个标签)

标签: html css css-float


【解决方案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>

【讨论】:

  • 字体大小适用于两个标签,这就是我在 div 上添加样式的原因。问题是第一个标签的大小为 8px,但第二个标签看起来更小。
  • 这个 CSS 有很多错误。这是如何被接受的答案?还有两个赞成票?
  • @Turnip 正确,甚至不需要那么多 CSS
【解决方案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 似乎会使屏幕上的一段文字变小。即使在 sn-p 中,事情也能正常工作。似乎如果您在打电话,那么float: right 播放效果不佳,并且使一段文本成为原始&lt;p&gt; 大小,另一段是您声明的8 pixels。如果你真的致力于让它在手机上保持这种尺寸,你可以尝试某种@media CSS 来使样式在较小的屏幕上有所不同。

【讨论】:

    猜你喜欢
    • 2023-03-08
    • 1970-01-01
    • 2012-12-07
    • 2013-05-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多