Question

我想使用HTML和CSS创建类似时间轴的内容：

但我唯一能得到的是：

我的时间线至少可以看到两个问题：

标签相对X位置与子弹的相对X位置不同。
标签不以每个子弹为中心。

您可以使用我在以下小提琴上使用的HTML和CSS：https://jsfiddle.net/DTcHh/67562/

HTML：

<body style="background-color: #eee">
  <div class="container-fluid">
    <div class="panel panel-default">
      <div class="panel-body">
        <br>
        <div class="list-grouplist-group" id="list">
          <li class="list-group-item">
            <span class="progress-bar-label list-group-item-heading lead">Paul Mal</span>
            <div class="Timeline">
              <svg height="10" style="width:100%">
                        <line x1="0%" y1="5" x2="100%" y2="5" style="stroke:#AAAAAA;stroke-width:3" />
                        <circle cx="10%" cy="5" r="5" fill="#004165"/>
                        <line x1="10%" y1="5" x2="55%" y2="5" style="stroke:#004165;stroke-width:3" />
                        <circle cx="55%" cy="5" r="5" fill="#004165"/>
                     </svg>
              <span class="time" style="margin-left:10%">13:00 (6/May)</span>
              <span class="time2" style="margin-left:55%">19:27 (7/May)</span>
            </div>
          </li>
          <li class="list-group-item">
            <span class="progress-bar-label list-group-item-heading lead">Jane Doe</span>
            <div class="Timeline">
              <svg height="10" style="width:100%">
                        <line x1="0%" y1="5" x2="100%" y2="5" style="stroke:#AAAAAA;stroke-width:3" />
                        <circle cx="90%" cy="5" r="5" fill="#004165"/>
                        <line x1="90%" y1="5" x2="100%" y2="5" style="stroke:#004165;stroke-width:3" />
                        <circle cx="100%" cy="5" r="5" fill="#004165"/>
                     </svg>
              <span class="time" style="margin-left:90%">13:00 (6/May)</span>
              <span class="time2" style="margin-left:100%">19:27 (7/May)</span>
            </div>
          </li>
          <li class="list-group-item">
            <span class="progress-bar-label list-group-item-heading lead">John Doe</span>
            <div class="Timeline">
              <svg height="10" style="width:100%">
                        <line x1="0%" y1="5" x2="100%" y2="5" style="stroke:#AAAAAA;stroke-width:3" />
                        <circle cx="0%" cy="5" r="5" fill="#004165"/>
                        <line x1="0%" y1="5" x2="5%" y2="5" style="stroke:#004165;stroke-width:3" />
                        <circle cx="5%" cy="5" r="5" fill="#004165"/>
                     </svg>
              <span class="time" style="margin-left:0%">13:00 (6/May)</span>
              <span class="time2" style="margin-left:5%">19:27 (7/May)</span>
            </div>
          </li>
          <li class="list-group-item">
            <span class="progress-bar-label list-group-item-heading lead">Thomas Phillips</span>
            <div class="Timeline">
              <svg height="10" style="width:100%">
                        <line x1="0%" y1="5" x2="100%" y2="5" style="stroke:#AAAAAA;stroke-width:3" />
                        <circle cx="70%" cy="5" r="5" fill="#004165"/>
                        <line x1="70%" y1="5" x2="71%" y2="5" style="stroke:#004165;stroke-width:3" />
                        <circle cx="71%" cy="5" r="5" fill="#004165"/>
                     </svg>
              <span class="time" style="margin-left:70%">13:00 (6/May)</span>
              <span class="time2" style="margin-left:71%">19:27 (7/May)</span>
            </div>
          </li>
        </div>
      </div>
    </div>
  </div>
</body>

CSS：

body {
  margin: 10px;
}

.Timeline {
  display: flex;
  align-items: center;
  height: 32px;
}

.time {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  margin-top: 12px;
  color: #9E9E9E;
}

.time2 {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  margin-top: -12px;
  color: #9E9E9E;
}

注1：每次调用Web服务后动态设置位置。注2：我使用的是Bootstrap 3。

有人可以做这项工作吗？

HTML＆amp; CSS时间轴，顶部和底部有相对定位标签

0 个答案: