垂直時間軸與CSS

-6

我想創建一個垂直的時間軸與其中的一些圖標。我用this作爲我的出發點。我不知何故設法在div內額外跨度。垂直時間軸與CSS

但它看起來有點亂。因爲我使用白色背景來隱藏線條，並使用額外的跨度來添加圖像。

你能不能審查我的代碼，並幫助我添加一個基於li

致謝id或class不同的圖像。總體而言，我想實現 1.添加基於類別或ID的圖像 2.刪除任何不必要的spanimg標籤以清除代碼。

段：

body{ 
 
    line-height:1.3em; 
 
} 
 
.history-tl-container{ 
 
    font-family: "Roboto",sans-serif; 
 
    width:50%; 
 
    margin:auto; 
 
    display:block; 
 
    position:relative; 
 
} 
 
.history-tl-container ul.tl{ 
 
    margin:20px 0; 
 
    padding:0; 
 
    display:inline-block; 
 

 
} 
 

 
span.check { 
 
width: 24px; 
 
height: 24px; 
 
background-repeat: no-repeat; 
 
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAnFJREFUSA3tU01oE0EUnpndVBKjNGkKelLpxYOg4MlSEW9RqCVZEMEfFFEP/mDQ2lSK4Ck/RCh40YseBEHtbmovXuoPeO3Jiz/0okKFStJqBUmyO883WyZMdjdtSb3pHObN+74335uZ94aQ/2OVF6Cr8Gumq8ND+6mmZVAw7AB/2FOYfCo2/5UElWwqqRE2hWoheSIgcCqWsx4xCXRqF68P7kDxx6q4qwU0I+y6EnzN7AtDqMtC8ZjvgBQS604Q3bD1Pr7xHp+4AIC8FkYXUyejmjUuUUpOBu4FqPC6Mya4jopcGRnq16j+xvfuQhGIg3OyO29OC7d5g+83jmzSmW4AwEanRq3eceubCPCO+eHDWxjTJhBvdowaw4GMxQvL4gJ3bzB3bTAR6Qq9RXenAIGQX4TzE7FC+bnw5Zg5vzfUF9/2ilI6IDHV4j4rljMNFXO7KBLSr0pxQWLWKKXMrI6kL6jBffHtpXbieKwPttM4rcaLtZsACNvtJTCLxhi9tzCaui24ajZ1HIt6xReHAD7rku1Aurc4teTll2sA/BOhwV+CEnZrcdTYhT8z6d0sfUromUTRei991bqqdo2W8BjzKuFZp1Ek4sFclxMoYseYQZzA3ASiY+wGPYCn/NwuMAjHor6cnrVuBnESa75L4o6JRbL7cdM7Sa5kAciX3/X6saPP3L5vG+q2qcpWLh/azKLhSXySgyresgaoNbg9gEWdacEDnOYNJNdz98XPudmPSazJE4n5LCcX1yIu9vluoIhRbNEJ7KK0gmFP8gfd+fLZFmwFx3cDJRZiubKBX7+AX3sBe/0H57w0ni+fU2L+geUfUZTBZo5OpcoAAAAASUVORK5CYII=); 
 
    background-repeat: no-repeat; 
 
    left: -14px; 
 
    position: absolute; 
 
    padding: 20px; 
 
} 
 

 

 
.history-tl-container ul.tl li{ 
 
    list-style: none; 
 
    margin:auto; 
 
    margin-left:200px; 
 
    min-height:50px; 
 
    border-left:1px solid #86D6FF; 
 
    padding:0 0 50px 30px; 
 
    position:relative; 
 
} 
 
.history-tl-container ul.tl li:first-child:before{ 
 
\t background: rgba(138, 223, 199, 1) none repeat scroll 0 0; 
 
} 
 

 
.history-tl-container ul.tl li:last-child{ border-left:0;} 
 
.history-tl-container ul.tl li::before{ 
 
    background: #FFFFFF none repeat scroll 0 0; 
 
    border: 2px solid rgba(138, 223, 199, 0.74); 
 
    border-radius: 500%; 
 
    content: " "; 
 
    height: 30px; 
 
    left: -18px; 
 
    position: absolute; 
 
    top: -5px; 
 
    transition: all 500ms ease-in-out 0s; 
 
    width: 30px; 
 

 
} 
 
/* .history-tl-container ul.tl li:hover::before{ 
 
    border-color: #258CC7; 
 
    transition: all 1000ms ease-in-out; 
 
} */ 
 
ul.tl li .item-title{ 
 
} 
 
ul.tl li .item-detail{ 
 
    color:rgba(0,0,0,0.5); 
 
    font-size:12px; 
 
} 
 
ul.tl li .timestamp{ 
 
    color: #8D8D8D; 
 
    position: absolute; 
 
    width:100px; 
 
    left: -50%; 
 
    text-align: right; 
 
    font-size: 12px; 
 
}

<div class="history-tl-container"> 
 
    <ul class="tl"> 
 
    <li class="tl-item" ng-repeat="item in retailer_history"> 
 
    
 
<span class="check"></span> 
 
     <div class="timestamp"> 
 
     3rd March 2015<br> 7:00 PM 
 
     </div> 
 
     <div class="item-title">Start from Shire</div> 
 
     <div class="item-detail">Don't forget the ring</div> 
 
    </li> 
 
    <li class="tl-item" ng-repeat="item in retailer_history"> 
 
     <div class="timestamp"> 
 
     19th March 2015<br> 3:00 PM 
 
     </div> 
 
     <div class="item-title">Kill some Orcs</div> 
 
     <div class="item-detail">Don't enter the caves!!</div> 
 
    </li> 
 
    <li class="tl-item" ng-repeat="item in retailer_history"> 
 
     <div class="timestamp"> 
 
     1st June 2015<br> 7:00 PM 
 
     </div> 
 
     <div class="item-title">Throw that goddamn ring in the lava</div> 
 
     <div class="item-detail">Also, throw that Gollum too</div> 
 
    </li> 
 

 
    </ul> 
 

 
</div>

來源

2016-05-06 Meanteacher

那你到底想要達到什麼目的？在我看來很好。 –

我想添加圖像沒有額外的跨度。由於我不擅長CSS和HTML，我會非常感激良好的批評。謝謝。 – Meanteacher

可以有額外的跨度。 –

你可以使用::after屬性。

.history-tl-container ul.tl li.achieved::after { 
    content: ""; 
    width: 24px; 
    height: 24px; 
    position: absolute; 
    top: 0; 
    left: -14px; 
    background-repeat: no-repeat; 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAnFJREFUSA3tU01oE0EUnpndVBKjNGkKelLpxYOg4MlSEW9RqCVZEMEfFFEP/mDQ2lSK4Ck/RCh40YseBEHtbmovXuoPeO3Jiz/0okKFStJqBUmyO883WyZMdjdtSb3pHObN+74335uZ94aQ/2OVF6Cr8Gumq8ND+6mmZVAw7AB/2FOYfCo2/5UElWwqqRE2hWoheSIgcCqWsx4xCXRqF68P7kDxx6q4qwU0I+y6EnzN7AtDqMtC8ZjvgBQS604Q3bD1Pr7xHp+4AIC8FkYXUyejmjUuUUpOBu4FqPC6Mya4jopcGRnq16j+xvfuQhGIg3OyO29OC7d5g+83jmzSmW4AwEanRq3eceubCPCO+eHDWxjTJhBvdowaw4GMxQvL4gJ3bzB3bTAR6Qq9RXenAIGQX4TzE7FC+bnw5Zg5vzfUF9/2ilI6IDHV4j4rljMNFXO7KBLSr0pxQWLWKKXMrI6kL6jBffHtpXbieKwPttM4rcaLtZsACNvtJTCLxhi9tzCaui24ajZ1HIt6xReHAD7rku1Aurc4teTll2sA/BOhwV+CEnZrcdTYhT8z6d0sfUromUTRei991bqqdo2W8BjzKuFZp1Ek4sFclxMoYseYQZzA3ASiY+wGPYCn/NwuMAjHor6cnrVuBnESa75L4o6JRbL7cdM7Sa5kAciX3/X6saPP3L5vG+q2qcpWLh/azKLhSXySgyresgaoNbg9gEWdacEDnOYNJNdz98XPudmPSazJE4n5LCcX1yIu9vluoIhRbNEJ7KK0gmFP8gfd+fLZFmwFx3cDJRZiubKBX7+AX3sBe/0H57w0ni+fU2L+geUfUZTBZo5OpcoAAAAASUVORK5CYII=); 
    background-repeat: no-repeat; 
    left: -14px; 
}

請注意，您必須將「達到」類添加到應在其中顯示檢查的li處。另外，您可以使用此類來突出顯示綠色。

.history-tl-container ul.tl li.achieved::before{ 
    background: rgba(138, 223, 199, 1) none repeat scroll 0 0; 
}

雖然跨度是正常的，但是如果你使用我的解決方案，你應該擺脫它。

來源

2016-05-06 17:56:08

謝謝。我添加了不使用選擇器，因爲無論圖標的類型如何，我都想讓第一項綠色。 – Meanteacher

垂直時間軸與CSS

回答

相關問題