我只是試圖將某些點與有序列表連接起來,但我無法使其工作。我想打開一個段根據活躍的類別,另外我想添加學生的名稱之間的段像這張圖片將點與CSS3中的有序列表連接起來
然後我可以切換到開啓其他部分與類活動。
這是我一直在試圖做的。
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>
在你的HTML中,你計劃放置學生的名字?你能更新你的代碼嗎(至少試圖)解決名稱顯示問題的一部分? – Serlite
要進一步瞭解細節,是否應該在每個細分受衆羣下都有一個標籤,或者是最新的?如果所有三個點都處於激活狀態,標籤應該放在哪裏? – Serlite
我更新了我的問題。每個細分下的標籤。但是標籤會被動態地添加到準確的部分。所以在一個部分它應該出現在右側的其他情況下的左側。事情是對齊。 –