Javascript Css：如何用边界线连接两个点

我试图通过css将两个点连接成一条线。试了几次，但没有成功

印度
06.07.1988 - 05:15
日本
06.07.1988 - 05:15
美国
06.07.1988 - 05:15
以色列
06.07.1988 - 05:15

努力实现以下目标

像这样的事

*，
：：之后，
：：之前{
框大小：边框框；
}
多特先生{
宽度：40px；
高度：40px；
背景色：红色；
边界半径：100em；
盒影：0 16px#fff；
}
博士{
显示器：flex；
对正内容：空间均匀；
边缘顶部：80px；
边框顶部：2件纯红；
}
美国国防部{
位置：相对位置；
顶部：计算（（40px/2）+（2px/2））*-1；
}

---

我在它们之间添加了一个自定义范围，其中class

行

。定位线，使其从一个点的右侧部分到下一个点的左侧部分。我已经从你的

Rtable单元格

类中删除了

overflow:hidden

，因为这行移到了该div之外。我已经添加了

z-index:2；位置：相对位置

用于

点

类将

行

排列在

点

后面

无论你给出的线的宽度值是多少，左边必须始终是50%，这条线将精确地对准中心。剩余的线条宽度将自动调整到我的线条边距

希望这对你有用

$bw:3px；
@可混合电池——光电池{
背景色：白色；
边框颜色：混合色（白色、红色，80%）；
}
.Rtable{
显示器：flex；
柔性包装：包装；
填充：0；
}
.可编程单元{
框大小：边框框；
柔性生长：1；
宽度：100%；//默认为全宽
填充：0.8em 0.2em；
//溢出：隐藏；//或flex可能会中断
列表样式：无；
背景：褪色（绿色，20%）；
文本对齐：居中；
}
多特先生{
高度：25px；
宽度：25px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
z指数：2；
位置：相对位置；
}
/*表列大小
================================== */
.Rtable--2cols>.Rtable单元格{宽度：50%；}
.Rtable--3cols>.Rtable单元格{宽度：33.33%；}
.Rtable--4cols>.Rtable单元格{宽度：25%；}
.Rtable--5cols>.Rtable单元格{宽度：20%；}
.Rtable--6cols>.Rtable单元格{宽度：16.6%；}
.Rtable--7cols>.Rtable单元格{宽度：14.2%；}
.Rtable--8cols>.Rtable单元格{宽度：12.5%；}
.Rtable--9cols>.Rtable单元格{宽度：11.1%；}
.Rtable{
位置：相对；//顶部：$bw；左侧：$bw；//补偿边界偏移
}
.可编程单元{
@包括可编程单元——光；
}
.线路{
宽度：70%；
高度：2倍；
显示：块；
位置：相对位置；
背景：蓝色；
顶部：-16px；
左：50%；
保证金：0自动；
}

印度
06.07.1988 - 05:15
日本
06.07.1988 - 05:15
美国
06.07.1988 - 05:15
以色列
06.07.1988 - 05:15

如果您想要一条连续的线，可以使用线性渐变在

Rtable单元格

div上创建一条线作为背景

div.Rtable-cell:nth-child(3n+1){
   background: linear-gradient(to bottom, white 46%, red 46% 49%, white 49%);
  /* or for a thicker line: */
   background: linear-gradient(to bottom, white 40%, red 40% 50%, white 50%);
}

n个子项（3n+1）

将从第一个子项开始选择第四个子项，即所有顺序：0个divs

更新：要在点和线之间添加空间，可以向点添加边框：

.dot { border: 10px solid white; /* REST OF your CSS */ }

（仅供参考，您的

.dot

是一个内联块，因此它下面有额外的空间，因此它在

Rtable单元格中不是完全垂直居中的。

。我将线条略高于中心，使其看起来居中。）

工作示例：

.Rtable{
显示器：flex；
柔性包装：包装；
填充：0；
}
.可编程单元{
框大小：边框框；
柔性生长：1；
宽度：100%；
填充：0.8em 0.2em；
溢出：隐藏；
列表样式：无；
背景：褪色（绿色，20%）；
文本对齐：居中；
}
多特先生{
高度：25px；
宽度：25px；
背景色：#bbb；
边界半径：50%；
边框：10px纯白；
显示：内联块；
}
/*表列大小
================================== */
.Rtable--2cols>.Rtable单元格{宽度：50%；}
.Rtable--3cols>.Rtable单元格{宽度：33.33%；}
.Rtable--4cols>.Rtable单元格{宽度：25%；}
.Rtable--5cols>.Rtable单元格{宽度：20%；}
.Rtable--6cols>.Rtable单元格{宽度：16.6%；}
.Rtable--7cols>.Rtable单元格{宽度：14.2%；}
.Rtable--8cols>.Rtable单元格{宽度：12.5%；}
.Rtable--9cols>.Rtable单元格{宽度：11.1%；}
.Rtable{
位置：相对；//顶部：$bw；左侧：$bw；//补偿边界偏移
}
.可编程单元{
@包括可编程单元——光；
}
分区表单元：第n个子单元（3n+1）{
背景：线性梯度（至底部，白色46%，红色46%，白色49%）；
}

印度
06.07.1988 - 05:15
日本
06.07.1988 - 05:15
美国
06.07.1988 - 05:15
以色列
06.07.1988 - 05:15

感谢您的回复。根据上图，在点和线的开始和结束之前，是否可以删除点之外的线和一些空格。@Raphael你可以在点和线之间添加空格-我已经更新了我的答案。因为它使用的是线性渐变，我想不出一种方法可以在不改变HTML的情况下立即删除两端的行。这是一个选择吗？谢谢你的回复。是否可以按照上述要求在线路的起点和终点之间留出一些空间picture@Raphael您可以通过减小线的宽度将网络中的空间添加到所需的级别。谢谢nitheesh，它在我的设置中运行良好。谢谢您的回复。是否可以删除3个点之外的线。

.dot { border: 10px solid white; /* REST OF your CSS */ }