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

StackOverflow https://stackoverflow.com/questions/483898

  •  20-08-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

Другие советы

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top