创建一个git使用css / js提交图样式列表 [英] Creating a git commits graph style list with css/js

问题描述

我知道我可以使用 list-style-image 用于自定义图像，所以我可以实现蓝色点，我可以创建空的第一个和最后一个项目，并将它们移动到左边，我唯一想到的是如何连接点（字面上）:)

谢谢你的时间

解决方案

我想有几种方法来完成这个。这是我的方式，这样做是为了使：before 和： 。我在主体< ul> 中添加了另一个< ul> ，以获取子作品。

$

  ul {margin-left：10px; list-style-image：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Small-dark-green-circle.svg/16px-Small-dark-green-circle.svg .png'）;}。outer-list {position：relative;}。 height：calc（100％ -  45px）; width：1px; content：'';显示：block;背景颜色：黑色; left：25px; top：20px;} ul li {padding：5px 0;}。inner-list {margin-left：0; margin-top：10px; margin-bottom：5px; position：relative;}。inner-list：before {position：absolute; height：40px; width：1px; content：'';显示：block;背景颜色：黑色; transform：rotate（-45deg）; left：4px;底部：100％; margin-bottom：-15px;}。inner-list：after {position：absolute; height：40px; width：1px; content：'';显示：block;背景颜色：黑色; transform：rotate（45deg）; left：5px; top：100％; margin-top：-15px;}。inner-list li {position：relative;} inner-list li：after {position：absolute; height：15px; width：1px; content：'';显示：block;背景颜色：黑色; left：-15px; top：20px;}。inner-list li：last-child：after {display：none;}  

 < ul class =outer-list> < li>& nbsp; < ul class =inner-list> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < li>项目1< / li> < / ul> < / li> < li>< / li>< / ul>  

What I have so far

How can I achieve a list with HTML, CSS,JavaScript that would look something like:

I know that I can use list-style-image for custom images, so I can achieve blue dots, I could create empty first and last item and move them to the left as well, the only thing I ponder is how to connect the dots (quite literally) :)
Thank you for your time

解决方案

I guess there are several ways to accomplish this. This is my way, and to do this, is to make great benefit of the :before and :after of elements. I added another <ul> inside the main <ul> to get the subitems.

This is just a quick setup, but play along and alter the code to your needs.

ul {
  margin-left: 10px;
  list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Small-dark-green-circle.svg/16px-Small-dark-green-circle.svg.png');
}

.outer-list {
  position: relative;
}

.outer-list:after {
  position: absolute;
  height: calc(100% - 45px);
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  left: 25px;
  top: 20px;
}

ul li {
  padding: 5px 0;
}

.inner-list {
  margin-left: 0;
  margin-top: 10px;
  margin-bottom: 5px;
  position: relative;
}

.inner-list:before {
  position: absolute;
  height: 40px;
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  transform: rotate(-45deg);
  left: 4px;
  bottom: 100%;
  margin-bottom: -15px;
}

.inner-list:after {
  position: absolute;
  height: 40px;
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  transform: rotate(45deg);
  left: 5px;
  top: 100%;
  margin-top: -15px;
}

.inner-list li {
  position: relative;
}

.inner-list li:after {
  position: absolute;
  height: 15px;
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  left: -15px;
  top: 20px;
}

.inner-list li:last-child:after {
  display: none;
}

<ul class="outer-list">
  <li>&nbsp;
    <ul class="inner-list">
      <li>Item 1</li>
      <li>Item 1</li>
      <li>Item 1</li>
      <li>Item 1</li>
    </ul>
  </li>
  <li></li>
</ul>

这篇关于创建一个git使用css / js提交图样式列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！