將點與CSS3中的有序列表連接起來

Question

我只是試圖將某些點與有序列表連接起來，但我無法使其工作。我想打開一個段根據活躍的類別，另外我想添加學生的名稱之間的段像這張圖片

然後我可以切換到開啓其他部分與類活動。

這是我一直在試圖做的。

jsfiddle

UPDATE

我更新了我的小提琴，因爲我忘了類主動添加到li元素

UPDATE

我更新一次我的小提琴顯示我應該去那個人的名字。

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和: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>

注意，如果標籤元素不能保證在項目中的同一個地方，我會建議增加一個類，以便更容易使用CSS進行定位。此外，如果您想隱藏有效網點後面的空白線條，請將z-index設置爲.timetable .dot:before爲負值。

另請注意在.timetable .active + .active .dot:before中使用同級選擇器。這可以確保只有兩個活動點之間的線條會突出顯示，而不是每個與活動項目關聯的線條。

希望這會有所幫助！如果您有任何問題，請告訴我。