Question

我只想尝试将一些点与有序列表连接起来，但我无法使其正常工作。我想根据活动课打开一个片段，另外我想在片段之间添加学生的姓名，如图

然后我可以切换到启用类的其他段。

这就是我一直想做的事情。

更新

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

更新

我再次更新了我的小提琴，以显示我应该在哪里找到这个人的名字。

ol.timetable li {
    min-width: 25%;
}

.timetable {
    width: 100%;
    list-style: none;
    list-style-image: none;
    margin: 20px 0 20px 0;
    padding: 0;
}

    .timetable li {
        float: left;
        text-align: center;
        position: relative;
    }

    .timetable .date {
        display: block;
        vertical-align: bottom;
        text-align: center;
        margin-bottom: 1em;
        color: #2B2B2B;
    }

    .timetable .dot {
        color: black;
        border: 3px solid #B2B2B2;
        background-color: #B2B2B2;
        border-radius: 50%;
        line-height: 1.2;
        width: 1.2em;
        height: 1.2em;
        display: inline-block;
        z-index: 2;
    }

    .timetable .active .date,
    .timetable .active .dot span {
        color: black;
    }

    .timetable .dot:before {
        content: "";
        display: block;
        background-color: #B2B2B2;
        height: 0.4em;
        width: 50%;
        position: absolute;
        bottom: 0.9em;
        left: 0;
        z-index: 1;
    }

    .timetable .dot:after {
        content: "";
        display: block;
        background-color: #B2B2B2;
        height: 0.4em;
        width: 50%;
        position: absolute;
        bottom: 0.9em;
        right: 0;
        z-index: 1;
    }

    .timetable li:first-child .dot:before {
        display: none;
    }

        .timetable li:first-child .dot:after .active {
            border: 3px solid #F26227 !important;
            background-color: #F26227 !important;
        }

    .timetable li:last-of-type .dot:after {
        display: none;
    }

     .timetable .active .dot {
        border: 3px solid #F26227;
        background-color: #F26227;
    }

    .timetable .active .dot:before,
    .timetable .active .dot:before {
        background-color: #F26227;
    }

<ol class='timetable'>
<li class="active">
  <span class='date'>5/26/2017</span>
  <span class='active dot'>
     <span>
     </span>
  </span>
</li>
<li class="active">
   <span class='date'>5/29/2017</span>
   <span class='active dot'>
      <span></span>
   </span>
</li>
<li>
   <span class='date'>6/5/2017</span>
   <span class='dot'>
      <span></span>
   </span>
</li>
</ol>

Answer 1

为了简化你需要编写多少CSS，我建议让每个线段只由一个长:before个伪元素组成，而不是:before和{{1 }}。这也使得在关联项目处于活动状态时填充前一个线段更加简单。

对于标签的放置，我将假设您将动态添加/删除包含它的:after，因此您需要确定最适合放置的位置。为了相应地定位和居中，我建议使用绝对定位和小变换来使文本居中。

把这一切放在一起，你得到：

<span>

ol.timetable li {
  min-width: 25%;
}
.timetable {
  width: 100%;
  list-style: none;
  list-style-image: none;
  margin: 20px 0 20px 0;
  padding: 0;
}
.timetable li {
  float: left;
  text-align: center;
  position: relative;
}
.timetable .date {
  display: block;
  vertical-align: bottom;
  text-align: center;
  margin-bottom: 1em;
  color: #2B2B2B;
}
.timetable .dot {
  color: black;
  border: 3px solid #B2B2B2;
  background-color: #B2B2B2;
  border-radius: 50%;
  line-height: 1.2;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  z-index: 2;
}
.timetable .active .date,
.timetable .active .dot span {
  color: black;
}
.timetable .dot:before {
  content: "";
  display: block;
  background-color: #B2B2B2;
  height: 0.4em;
  width: 100%;
  position: absolute;
  bottom: 0.9em;
  left: -50%;
  z-index: 1;
}
.timetable li:first-child .dot:before {
  display: none;
}
.timetable .active .dot {
  border: 3px solid #F26227;
  background-color: #F26227;
}
.timetable .active + .active .dot:before {
  background-color: #F26227;
}
.timetable li > span:nth-child(3){
  position:absolute;
  right:0;
  bottom:-15px;
  transform: translateX(50%);
}

请注意，如果不能保证标签元素在项目中的同一位置，我建议为其添加一个类，以便更容易使用CSS进行定位。此外，如果您要隐藏活动点后面的任何未填充的行，只需将<ol class='timetable'> <li class="active"> 5/26/2017 John Doe </li> <li class="active"> 5/29/2017 </li> <li> 6/5/2017 </li> </ol>上的z-index设置为负值。

另请注意.timetable .dot:before中兄弟选择器的用法。这样可以确保只突出显示两个活动点之间的线，而不是与活动项关联的每一行。

希望这有帮助！如果您有任何问题，请告诉我。

在CSS3中将点与有序列表连接起来

1 个答案: