垂直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财产的价值更少。

演示： see markup
对于margin-top当前字体大小值是38px
逻辑上，它应该是始终等于60px。

问：
有没有JSCSS解决垂直timilene，它不依赖于font-size？

Answer 1

这并不完全清楚你想要什么。但是我怀疑你希望确保时间表上等分的部分。

您不需要用margin-top补偿字体大小。删除这些内嵌的风格和简单修复的div的高度与

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

见：http://jsfiddle.net/fmSfc/4/

Answer 2

使用恒定的line-height - 你可以改变字体大小不改变的margin-top和整体高度。检查更新：http://jsfiddle.net/fmSfc/6/

此外，它会更好地使用未排序的列表然后divs，因为您有许多列出的类似元素。