在CSS3中用有序列表连接点

我只是想把一些点和一个有序的列表联系起来，但我不能让它工作。我想根据活动类打开一个段，另外我想在段之间添加学生的姓名，如下图所示

然后我可以在类处于活动状态时切换到打开另一个段

这就是我一直想做的

更新

我更新了我的小提琴，因为我忘了将类活动添加到li元素

更新

我再次更新了我的小提琴，以显示我应该去哪里的人的名字

ol.li{
最小宽度：25%；
}
.时间表{
宽度：100%；
列表样式：无；
列表样式图像：无；
保证金：20px 0 20px 0；
填充：0；
}
李先生{
浮动：左；
文本对齐：居中；
位置：相对位置；
}
.时间表.日期{
显示：块；
垂直对齐：底部对齐；
文本对齐：居中；
边缘底部：1米；
颜色：#2b2b；
}
.时刻表{
颜色：黑色；
边框：3px实心#B2B2B2；
背景色：#B2B2B2；
边界半径：50%；
线高：1.2；
宽度：1.2米；
高度：1.2米；
显示：内联块；
z指数：2；
}
.时间表。活动。日期，
.时间表.激活.点跨度{
颜色：黑色；
}
时间点：之前{
内容：“；
显示：块；
背景色：#B2B2B2；
高度：0.4em；
宽度：50%；
位置：绝对位置；
底部：0.9em；
左：0；
z指数：1；
}
时间点：之后{
内容：“；
显示：块；
背景色：#B2B2B2；
高度：0.4em；
宽度：50%；
位置：绝对位置；
底部：0.9em；
右：0；
z指数：1；
}
李：第一个孩子{
显示：无；
}
李：第一个孩子。点：之后。活动{
边框：3倍实心#F26227！重要；
背景色：#F26227！重要；
}
李：最后一种。点：之后{
显示：无；
}
.时刻表.激活.点{
边框：3px实心#F26227；
背景色：#F26227；
}
.时刻表.激活.dot:之前，
.时刻表.激活.dot:之前{
背景色：#F26227；
}

5/26/2017


5/29/2017


6/5/2017

为了简化需要编写的CSS数量，我建议每个线段只由一个长的

：before

伪元素组成，而不是由

：before

和

：after

组合而成。这也使得在关联项处于活动状态时，填写前面的线段更为简单

对于标签的放置，我将假设您将动态添加/删除包含它的

，因此将由您决定它应该最佳放置的位置。为了相应地定位和居中，我建议绝对定位和一个小的变换来居中文本

综上所述，您可以得到：

ol.li{
最小宽度：25%；
}
.时间表{
宽度：100%；
列表样式：无；
列表样式图像：无；
保证金：20px 0 20px 0；
填充：0；
}
李先生{
浮动：左；
文本对齐：居中；
位置：相对位置；
}
.时间表.日期{
显示：块；
垂直对齐：底部对齐；
文本对齐：居中；
边缘底部：1米；
颜色：#2b2b；
}
.时刻表{
颜色：黑色；
边框：3px实心#B2B2B2；
背景色：#B2B2B2；
边界半径：50%；
线高：1.2；
宽度：1.2米；
高度：1.2米；
显示：内联块；
z指数：2；
}
.时间表。活动。日期，
.时间表.激活.点跨度{
颜色：黑色；
}
时间点：之前{
内容：“；
显示：块；
背景色：#B2B2B2；
高度：0.4em；
宽度：100%；
位置：绝对位置；
底部：0.9em；
左-50%；
z指数：1；
}
李：第一个孩子{
显示：无；
}
.时刻表.激活.点{
边框：3px实心#F26227；
背景色：#F26227；
}
.时刻表.激活+.激活.点：之前{
背景色：#F26227；
}
.时间表李>跨度：第n个孩子（3）{
位置：绝对位置；
右：0；
底部：-15px；
转化：translateX（50%）；
}

5/26/2017
无名氏


5/29/2017


6/5/2017

您打算在HTML中的什么地方输入学生的姓名？您是否可以更新您的代码，使其（至少尝试）解决问题的名称显示部分？要进一步了解详细信息，是应该在每个段下都有一个标签，还是仅在最新的段下？如果这三个点都是活动的，标签应该放在哪里？我更新了我的问题。每个段下都有一个标签。但是标签将被动态添加到精确的片段中。因此，在一段中，它应该出现在左侧，在其他情况下，它应该出现在右侧。问题是对齐。谢谢你的回答。我只为第一部分工作，但当我切换到另一部分时遇到了问题。这意味着中间和最后一个点的class=active。@maximudecimus我明白了-你的意思是在任何给定的时间只有两个点可以

.active

？@maximudecimus好的，我对一个选择器做了一个调整，可以满足这个需要。