Question

我正在尝试创建一个垂直时间轴，其中包含一些图标。我用this作为我的起点。我以某种方式设法在div内额外跨度。

然而它看起来有点混乱。因为我使用白色背景来隐藏线条，并使用额外的跨度来添加图像。

您是否可以查看我的代码并帮助我根据id 的class或li添加不同的图片

感谢。总的来说，我想实现 1.根据li的类或id添加图像 2.删除所有不必要的span img标记以清除代码。

摘录：

＆＃13;

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{ 
	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;
}

＆＃13;

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

＆＃13;

Answer 1

您可以使用::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;
}

注意，你必须添加＆＃34;达到＆＃34;应该显示检查的li的类。此外，您可以使用此类突出显示绿色。

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

但是，跨度没有问题，但是如果你使用我的解决方案，你应该摆脱它。

CSS的垂直时间轴

1 个答案: