Проблема CSS с относительными размерами
Вопрос
У меня есть этот код
<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.