Question

我有这段代码

<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来获得相同的大小。知道如何解决这个问题吗？

Answer 1

px不是一个选项，因为我想保持设计“可扩展”。我刚刚发现，它的宽度为“宽度：100％”。

Answer 2

如果您没有声明SPAN元素（或width:100%）的宽度，则其属性display:block已经确保其宽度为完整的可用宽度。< / p>

Answer 3

请注意，使用em是relative to the containing em size。使用px或pt时，您的大小与屏幕分辨率有关。这就是为什么你在20em标签内获得红色span的20em宽度的原因。

相对大小的CSS问题

3 个答案: