html - 沿线定位点

Question

我正在尝试使用 CSS 构建以下组件，但我无法让第一个和最后一个点与行尾齐平。

它必须能够支持任意数量的点(1 到 4 之间)，我也不能依赖 flexbox。

我有一个生成 HTML 的 React 组件，如下所示:

<div class="row">
  <div class="col first" style="width:33%">
    <div class="marker complete"></div>
    <label>Feedback</label>
  </div>
  <div class="col" style="width:33%">
    <div class="marker partial"></div>
    <label>Observation</label>
  </div>
  <div class="col last" style="width:33%">
    <div class="marker review"></div>
    <label>Documentation</label>
  </div>
</div>

JavaScript 在渲染前计算列大小，in my codepen implementation , 我只是将每列中的所有内容居中。

我可以通过使用 first 和 last 类来解决最终元素的相对定位问题，但总是在屏幕尺寸发生变化时，我开始明白从点后面伸出的线的边缘。

有谁知道开始构建它的更合理的布局？

Answer 1

我的想法是将row设置为display:table-row，然后使用一个伪元素来生成水平条。但是，您会遇到这样一个问题，即您无法仅通过 CSS 和 HTML 知道第一个和最后一个圆圈的位置相对于容器的大小。因此，不可能使用全宽元素。

另一种方法是使用标签作为伪元素的根项。它们始终是列的整个宽度，因此它们很好地指示了需要使用的内容。

following proposed solution应该与IE9一起工作。使用的唯一特殊是calc 和after。 (如果需要，您也可以使用 transform: translate 而不是 calc。)

基本思想是使用表格行，它会自动很好地缩放，然后使用标签作为根，您可以在其上构建进度条。

label:after {
  content: "";
  height: .5em;
  background: #e2e2e2;
  width: 100%;
  position: absolute;
  top: calc((100% - 1.5em) / 2); /* -1 to compensate text, -.5 for height bar */
  left: 0;
  z-index: -1;
}

.first label:after, .last label:after {
  width: 50%;
}

.first label:after {
  left: auto; 
  right: 0;
}

.single label:after {content: none;}