html - 水平时间轴 - 标签重叠

Question

我正在使用绝对定位的 div 构建水平时间轴。

但是，当日期靠得太近时，我遇到了一个问题，即每个 div 的标签重叠。你可以在下面的Plunker中看到这一点(标签一和标签二重叠)

https://plnkr.co/edit/fhff4V6Zo8ko2Sllv2DZ?p=preview

我需要加入某种边距，但是我不确定如何做到这一点，因为宽度是动态创建的(基于特定的日期值)

任何建议都会很棒!

HTML

<div class='timeline' style='width:100%;position:relative'>

      <div class='one timeline-milestone'>
        <div class='timeline-label'>
          Label One
        </div>
      </div>

      <div class='two timeline-milestone'>
        <div class='timeline-label'>
          Label Two
        </div>
      </div>

      <div class='three timeline-milestone'>
        <div class='timeline-label'>
          Label Three
        </div>
      </div>

      <div class='four timeline-milestone'>
        <div class='timeline-label'>
          Label Four
        </div>
      </div>
</div>

CSS

.timeline-milestone {
  height:10px;
  margin-bottom:20px;
  width:10%;
  text-align:right;
  position:absolute;
}

.one {
width:10%;  
}

.two {
width:15%;
}

.three {
width:50%;
}

.four {
  width:90%;
}

笨蛋

https://plnkr.co/edit/fhff4V6Zo8ko2Sllv2DZ?p=preview

Answer 1

添加以下CSS:

.timeline{
  display: table;
}

.timeline-milestone {
  display: table-cell;
  height:10px;
  width: auto;
  text-align:right;
}

将其转换为表格将确保它们永远不会重叠。 display:table 和 table-cell 将自动处理动态宽度。

已更新 plunker