Устойчивая разметка вертикальной шкалы времени CSS

Question

Описание:
Вертикальная шкала времени для 12 hours день.
Высота 720px,
С первого взгляда разметка должна выглядеть так:

<div style="margin-top:0px;">
 9:00
</div>
<div style="margin-top:60px;">
 10:00
</div>
       ...
<div style="margin-top:60px;">
 11:00
</div>

Оказалось, что мы должны принять во внимание font-size,
Чем больше, тем меньше должно быть значение margin-top имущество.

Демо: увидеть разметку
Для текущего значения размера шрифта margin-top является 38px
По логике он всегда должен быть равен 60px,

Вопрос:
Есть CSS решение без JS для вертикального тимилена, который не зависит от font-size?

Answer 1

Не совсем понятно, чего вы хотите. Но я подозреваю, что вы хотели бы обеспечить равномерно распределенные временные рамки.

Вам не нужно компенсировать размер шрифта с помощью margin-top. Удалите эти встроенные стили и просто исправьте высоту div с помощью

.timeline-container > div{
   height:60px;   
}

см.: http://jsfiddle.net/fmSfc/4/

Answer 2

Используйте постоянную высоту строки - вы сможете изменить размер шрифта, не меняя поля и общую высоту. Проверьте обновление: http://jsfiddle.net/fmSfc/6/

Кроме того, было бы лучше использовать несортированный список, чем div, так как у вас есть много перечисленных похожих элементов.