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

雷克萨斯FTW

我只是想将一些点与有序列表连接起来,但是我无法使其工作。我想根据活动班级打开一个细分,另外,我想在该细分之间添加学生的姓名,例如这张图片在此处输入图片说明

然后,我可以切换为在激活该类的情况下打开其他部分。

这就是我一直试图做的。

jsfiddle

更新

我更新了小提琴,因为我忘记将活动类添加到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>

Serlite

为了简化您需要编写多少CSS,我建议使每个线段仅由一个长的:before伪元素组成,而不是由:before和组成: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%);
}
<ol class='timetable'>
  <li class="active">
    <span class='date'>5/26/2017</span>
    <span class='active dot'>
     <span>
     </span>
    </span>
    <span>John Doe</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>

请注意,如果不能保证label元素位于项目中的同一位置,我建议向其添加一个类,以使其更易于使用CSS定位。另外,如果您想在活动点后面隐藏任何未填充的线,只需将z-indexon.timetable .dot:before设置为负值即可。

另请注意中的同级选择器的用法.timetable .active + .active .dot:before这样可以确保仅突出显示两个活动点之间的线,而不是与活动项关联的每条线。

希望这可以帮助!如果您有任何问题,请告诉我。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

通过将具有相同名称的键的列表连接起来,组合多个Map <String,List>结构

如何将随机字符中的字符串与列表连接起来?

是否有任何haskell函数将列表与分隔符连接起来?

使用geom_line()将选定的NA之间的点连接起来

将Spark中的稀疏向量连接起来?

使用箭头将一个项目内但跨组的点连接起来

ggplot2:将极坐标中的点与直线2连接起来

将React-Leaflet CircleMarker和悬停点上的散点图连接起来

在python中,如何在绘图中将点与平滑线连接起来?

如何根据数量将java8中列表中的字符串元素连接起来?

使用ggplot将分组的点图中的所有点连接起来

如何将字符串与列表项中的列表连接起来?

在Common Lisp中将数字与空格连接起来?

在R中使用ggplot将移位图与另一图的点连接起来

Python:根据具有列表的列将列连接起来

如何通过gpplot中的不同组将点与线连接起来?

JavaScript将无序列表中每一行的分隔符与文本连接起来并附加到另一个ul

如何将每个ID的3列中的值连接起来?

将矩阵从Matlab中的单元连接起来

使用rbind将具有零值的数据帧列表连接起来

如何在Ubuntu 16.04中将ICU库与gcc连接起来?

将列表与 linq 中的表连接起来

C#图表系列如何将屏幕上缺失的点连接起来?

在 Pug 中将变量与 Id 标签连接起来

如何在for循环中将字符串与python中的列表连接起来

将 3 个表与其他表中的多个值连接起来

将键值对列表中的键与接近值 c# 连接起来

将浮点列表与表中的字符串列表连接起来

在python3中将整数0与其他整数连接起来