css - 垂直 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。

问题：
有没有不依赖于垂直 timilene 的CSS解决方案？JSfont-size

score 3 · Accepted Answer

目前还不清楚你想要什么。但我怀疑你想确保时间线的等距划分。

您不需要使用 margin-top 来补偿字体大小。删除那些内联样式并简单地修复 div 的高度

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

score 0 · Accepted Answer

使用恒定的 line-height - 您将能够在不更改 margin-top 和整体高度的情况下更改字体大小。检查更新：http: //jsfiddle.net/fmSfc/6/

此外，最好使用未排序的列表然后使用 div，因为您列出了许多类似的元素。

2 回答 2