相对大小的 CSS 问题答案

【问题标题】：CSS issue with relative sizes相对大小的 CSS 问题
【发布时间】：2017-09-22 05:37:05
【问题描述】：

我有这个代码

<html>
 <head>
  <style type="text/css">
   .frame                  {width: 50em; border: 1px solid black}
   .frame  label           {width: 20em; display: block; text-align:right; border: 1px solid green} 
   .frame label span       {width: 20em; display: block; font-size: .5em; border: 1px solid red; text-align: right}
  </style>
 </head>
 <body>
  <div class="frame">
   <label>
    Label
    <span>
     Span
    </span>
   </label>
  </div>
 </body>

红色的<span> 设置为20em。但它应该和绿色的<label> 一样大。不过，我想在红色部分保持较小的字体大小。不幸的是，即使font-size 是原来的一半，我也无法使用40em 来获得相同的大小。知道如何解决这个问题吗？

【问题讨论】：

标签： css font-size

【解决方案1】：

px 不是一个选项，因为我确实希望保持设计“可扩展”。我刚刚发现，它适用于跨度的“宽度：100%”。

【讨论】：

是的，宽度：100%；会将其设置为包含元素的 100%——这对你来说可能是一个更好的设计。
你应该早点把这个放在你的问题中。我以为你想要的只是解决这个问题。（如您的问题所述）：-s

【解决方案2】：

如果您不为 SPAN 元素（或 width:100%）声明宽度，则其属性 display:block 已经确保其宽度将是完整的可用宽度。

【讨论】：

【解决方案3】：

请注意，使用 em 是 relative to the containing em size。使用 px 或 pt 时，您的尺寸与屏幕分辨率相关。这就是为什么当在 20em 标签内时，红色span 的宽度为 20em。

【讨论】：