CSS проблема с относительными размерами - PullRequest
Новая
       12

CSS проблема с относительными размерами

1 голос
/ 27 января 2009

У меня есть этот код 

<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, чтобы получить тот же размер. Есть идеи, как решить эту проблему?

Ответы [ 3 ]

2 голосов
/ 27 января 2009

px не вариант, так как я хочу сохранить дизайн "масштабируемым". Я только что узнал, что он работает с "width: 100%" для диапазона.

1 голос
/ 27 января 2009

Обратите внимание, что использование em равно относительно содержащего их размера . При использовании px или pt ваш размер зависит от разрешения экрана. Вот почему вы получили значение ширины 20em для красного span внутри этикетки 20em.

1 голос
/ 27 января 2009

Если вы не объявляете ширину для элемента SPAN (или width:100%), его свойство display:block уже гарантирует, что его ширина будет полной доступной шириной.

...